[求助] 由数据库取 JSON 于前端 Google Map 标记_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛

总帖数

每页帖数

1/1页

返回列表

发起投票

查看: 4964 | 回复: 1

主题： [求助] 由数据库取 JSON 于前端 Google Map 标记

东西南北

注册用户

等级：少校
经验：1161
发帖：16
精华：0
注册：2015-10-10
状态：离线
发送短消息息给东西南北

加好友发送短消息息给东西南北

发消息

发表于：

2016-5-27 9:44:38 | [全部帖] [楼主帖]

楼主

执行环境 -

作业系统: Windows 7 Home Basic

JDK 版本: jdk 1.8.0_77

使用工具: Eclipse-jee-mars-2-win32-x86_64

数据库: Microsoft SQL Server 2012

使用者年资: 初学不到半年...

----------------------------------------------------------------------------------------------------

问题描述 -

专题网站我们正在做一个 Google Map 功能: 页面上有个大 Google Map ，上面会显示多点标记 [由所有使用者于新增资料页面所新增的资料]，使用者点击或滑过标记会跳出信息窗显示该地点资料.

设想流程如下:

1.使用者由网页输入"地点&资料"后转出纬经度并与其他资料储存至数据库. [该步骤已完成]

2.由数据库"定时"汇出 JSON 档案后交由JSP Google Map Api 读取后于地图上进行多点标记. [该步骤已完成]

----------------------------------------------------------------------------------------------------

原始程序(Ans) -

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    window.onload = function () {
      $.ajax(
        '${pageContext.request.contextPath}/googlemap/GoogleMapServlet',
        {
          async:false,
          cache:false,
          contentType:'application/json',
          success:function(data){
            LoadMap(data);
          }
        }
      );
    }
    
    function LoadMap(markers) {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var latlngbounds = new google.maps.LatLngBounds();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
 
        for (var i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.Title + data.Desc + "</div>");
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            latlngbounds.extend(marker.position);
        }
        var bounds = new google.maps.LatLngBounds();
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);
    }
</script>
</head>
<body>
<div id="dvMap" style="width: 800px; height: 800px">
</div>
</body>
</html>