[求助]  由数据库取 JSON 于前端 Google Map 标记_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
2
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 4777 | 回复: 1   主题: [求助]  由数据库取 JSON 于前端 Google Map 标记        上一篇   下一篇 
东西南北
注册用户
等级:少校
经验:1161
发帖:16
精华:0
注册:2015-10-10
状态:离线
发送短消息息给东西南北 加好友    发送短消息息给东西南北 发消息
发表于: IP:您无权察看 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>





赞(0)    操作        顶端 
蜀山战纪
版主
等级:中校
经验:2051
发帖:38
精华:6
注册:2015-10-23
状态:离线
发送短消息息给蜀山战纪 加好友    发送短消息息给蜀山战纪 发消息
发表于: IP:您无权察看 2016-5-27 9:45:58 | [全部帖] [楼主帖] 2  楼

我觉得可以考虑定时将地图资料产出为KML档案(或是及时动态产生,

以前我就是这么干地,一次产生数万个标记,以前还可以压成KMZ)

然后在网页中载入,

不过要小心的是GMap有每天25,000的载入限制,

若你的网站用户或显示的物件超多,25,000的载入限制应该很快超过,

然后就GG(忽然多出来的限制改的让我措手不及)

这时侯要考虑的就是付费,不然就是转到OSM(比较建议这个,虽然还不知道怎么玩



QQ图片20160129113517.jpg


赞(0)    操作        顶端 
总帖数
2
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论