通过谷歌地图定位、并且通过经纬度标注位置与信息窗口提示。效果如下:
示例代码:
var map; //var directionsDisplay; var scenicLat = "<?php echo $lat;?>"; var scenicLng = "<?php echo $lng;?>"; if( (scenicLat == '0') || (scenicLng == '0') ) { $.prompt('没有领队信息,请稍后再试',{ buttons: { "确定": true } }); } var bounds; var index=100; function clickPoint(lat,lng) { if( (lat == '0') || (lng == '0') ) { $.prompt('没有领队信息,请稍后再试',{ buttons: { "确定": true } }); return false; } var infowindow = new google.maps.InfoWindow({ disableAutoPan:false, maxWidth:200, content: "" }); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); var scenicPoint = new google.maps.LatLng(lat, lng); bounds.extend(scenicPoint); var image2 = new google.maps.MarkerImage('<?php echo site_url('assets/images/pointer.png');?>'); var scenic = new google.maps.Marker({ position: scenicPoint,icon:image2}); scenic.setMap(map); infowindow.setContent('<?php echo $name." ";?><?php echo $time;?>'); infowindow.open(map,scenic); $(".gm-style-iw").next("div").remove(); map.fitBounds(bounds); google.maps.event.addListener(scenic, 'click', function(event){ if(scenic != undefined ) { scenic.setZIndex(index++); infowindow.setContent('<?php echo $name." ";?><?php echo $time;?>'); infowindow.open(map,scenic); $(".gm-style-iw").next("div").remove(); } else { //map.fitBounds(bounds); infowindow.close(); } }); } function initialize() { bounds = new google.maps.LatLngBounds(); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl:false }; map = new google.maps.Map(document.getElementById('map'), mapOptions); var infowindow = new google.maps.InfoWindow({ disableAutoPan:false, maxWidth:200, content: "" }); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var nowLng = position.coords.longitude; var nowLat = position.coords.latitude; var now = new google.maps.LatLng(nowLat, nowLng); bounds.extend(now); var image = new google.maps.MarkerImage('<?php echo site_url('assets/images/cur.png');?>'); var location = new google.maps.Marker({ position: now,icon: image}); location.setMap(map); google.maps.event.addListener(location, 'click', function(event){ if(location != undefined ) { location.setZIndex(index++); infowindow.setContent('当前位置'); infowindow.open(map,location); $(".gm-style-iw").next("div").remove(); } else { infowindow.close(); } }); if((scenicLat != 0) || (scenicLng !=0) ) { var scenicPoint = new google.maps.LatLng(scenicLat, scenicLng); bounds.extend(scenicPoint); var image2 = new google.maps.MarkerImage('<?php echo site_url('assets/images/pointer.png');?>'); var scenic = new google.maps.Marker({ position: scenicPoint,icon: image2}); scenic.setMap(map); infowindow.setContent('<?php echo $name." ";?><?php echo $time;?>'); infowindow.open(map,scenic); $(".gm-style-iw").next("div").remove(); google.maps.event.addListener(scenic, 'click', function(event){ if(scenic != undefined ) { scenic.setZIndex(index++); infowindow.setContent('<?php echo $name." ";?><?php echo $time;?>'); infowindow.open(map,scenic); $(".gm-style-iw").next("div").remove(); } else { infowindow.close(); } }); } map.fitBounds(bounds); }, function() { $.prompt('定位失败',{ buttons: { "确定": true } }); var scenicPoint = new google.maps.LatLng(scenicLat, scenicLng); bounds.extend(scenicPoint); var point = new google.maps.Marker({ position: scenicPoint}); point.setMap(map); infowindow.setContent('<?php echo $name." ";?><?php echo $time;?>'); infowindow.open(map,point); $(".gm-style-iw").next("div").remove(); google.maps.event.addListener(point, 'click', function(event){ if(point != undefined ) { point.setZIndex(index++); infowindow.setContent('<?php echo $name." ";?><?php echo $time;?>'); infowindow.open(map,point); $(".gm-style-iw").next("div").remove(); } else { infowindow.close(); } }); map.fitBounds(bounds); }); } else { $.prompt('定位失败',{ buttons: { "确定": true } }); var scenicPoint = new google.maps.LatLng(scenicLat, scenicLng); bounds.extend(scenicPoint); var point = new google.maps.Marker({ position: scenicPoint}); point.setMap(map); infowindow.setContent('<?php echo $name." ";?><?php echo $time;?>'); infowindow.open(map,point); $(".gm-style-iw").next("div").remove(); google.maps.event.addListener(point, 'click', function(event){ if(point != undefined ) { point.setZIndex(index++); infowindow.setContent('<?php echo $name." ";?><?php echo $time;?>'); infowindow.open(map,point); $(".gm-style-iw").next("div").remove(); } else { infowindow.close(); } }); map.fitBounds(bounds); } } google.maps.event.addDomListener(window, 'load', initialize);