1首先引入谷歌地图的API
<!--引用谷歌地图API-->
<script src=
"http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"
></script>
注意这边的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 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;//记录之前打开的提示框
});
iw_ = iw;//记录之前打开的提示框
});
}
首先
var marker = "marker_”+num;是为了不同的iw,防止因为循环只取到最后的东西。
marker定义了点与marker的样式。
marker.setMap(map);将marker放入地图里。
添加谷歌提供的监听器,如果iw_不为空则将上一个打开的iw_给关闭。重新打开。
这个功能亮点在于:
1,防止所有的marker的值都取到的是最后一个,通过命名时拼接num完成;
2,防止打开过多的infoWindow,通过监听器与变量赋值完成;