Jquery 的google map 应用

本文介绍了一种利用JavaScript实现地图数据可视化的方法,包括加载地图数据、配置地图控件、显示地图中心点和创建点击事件触发信息窗口等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<mce:script language="javascript" type="text/javascript"><!-- $(document).ready(function () { $.ajax({ type: "POST", url: "GetMap.ashx/ProcessRequest", dataType: "json", success: function (data) { var datalist = data; var map = new GMap2(document.getElementById("mapdiv")); //地图信息 map.addControl(new GMapTypeControl()); //选择地图类型的控件(如卫星图到二维地图的切换控件) map.addControl(new GLargeMapControl()); //大号平移和缩放控件,位置是左上角 map.addControl(new GOverviewMapControl()); //添加鹰眼控件 map.addControl(new GScaleControl()); // 比例尺控件 map.enableGoogleBar(); //显示google搜索框 var icon = new GIcon(); //设置ICO定位 icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; icon.iconSize = new GSize(12, 20); //图片尺寸 icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); $(datalist).each(function (index, content) { map.setCenter(new GLatLng(content.LATITUDE, content.LONGITUDE), 13); //设置显示地图中间位置,代表地图缩放级别 var point = new GLatLng(content.LATITUDE, content.LONGITUDE); //组合坐标点 map.addOverlay(createMarker(point, content.ADDRESS)); //注册坐标点 }) window.setTimeout(function () { //等待2秒,然后平移到一个新的中心点 map.panTo(new GLatLng(content.LATITUDE, content.LONGITUDE)); }, 2000); }, error: function (data) { alert('获取数据超时...'); } }); //显示信息函数 function createMarker(point, number) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function () { marker.openInfoWindowHtml("<b>" + number + "</b>"); }); return marker; } }) // --></mce:script> <div id="mapdiv" style="width: 600px; height: 450px;"> </div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值