谷歌地图的引用

这篇博客详细介绍了如何引用谷歌地图API并初始化地图,包括设置中心点、创建Marker及管理InfoWindow。作者强调了在循环中创建Marker时防止信息覆盖和过多InfoWindow打开的策略,提供了一个自定义的initGoogleMarker方法来实现这一目标。

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

1首先引入谷歌地图的API
<!--引用谷歌地图API-->
注意这边的key

2自定义初始化谷歌地图的方法,并调用 InitGoogleMap(shopCoordinates),这里由原来工程的ajax取到的数据。 shopCoordinates的内容如图所示(参考时应根据不同场景适当改变)

3, InitGoogleMap的方法:
获取到第一条数据的值作为中心点 centerPointShopInfo,取到其对应的地址,和信息。
定义地图配置:
var mapProp = {
     //center:new google.maps.LatLng(51.508742,-0.120850),
     center:new google.maps.LatLng(centerPointCoordinateArr[0], centerPointCoordinateArr[1]),
     zoom:12,
     mapTypeId:google.maps.MapTypeId.ROADMAP
};
定义地图,带入容器和配置
var map=new google.maps.Map(document.getElementById("map_canvas"),mapProp);
循环放入marker
 如上面所见的参数是数组,地图中可以添加多个marker。,通过 initGoogleMarker方法。

4,initGoogleMarker方法
其中带入了这几个参数:点ggPoint,内容shopCoorDinateAddress,地图map,第几个num
重点:在方法外定义一个 iw_=null;用于存放之前的infoWindow,做个记录为了防止打开多个iw
function initGoogleMarker(ggPoint,shopCoordinateAddress,map,num){
var marker = "marker_"+num;   //生成组件名字
var infowindow = "infowindow_"+num;//生成组件名字
marker = new google.maps.Marker({
position:ggPoint,
icon:"
${base} /resources/shop/images/icon.png"

});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
  if(iw_!=null){
      iw_.close();
     }//判断是否为空
  var iw = new google.maps.InfoWindow({content:            shopCoordinateAddress});
  iw.open(map, marker); 
  iw_ = iw;//记录之前打开的提示框
});
}
首先  var marker = "marker_”+num;是为了不同的iw,防止因为循环只取到最后的东西。
marker定义了点与marker的样式。
marker.setMap(map);将marker放入地图里。
添加谷歌提供的监听器,如果iw_不为空则将上一个打开的iw_给关闭。重新打开。


这个功能亮点在于:
1,防止所有的marker的值都取到的是最后一个,通过命名时拼接num完成;
2,防止打开过多的infoWindow,通过监听器与变量赋值完成;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值