大佬教程收集整理的这篇文章主要介绍了javascript – Google Map API V3 – 点击标记将显示更多信息内容作为重叠式广告(如在Google Maps中)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我们是否内置了api功能来加载如上所述的叠加框.或者我们没有加载细节的功能,就像我们目前在谷歌地图中一样.
当我在谷歌和地图文档中搜索时,我可以看到显示叠加窗口的选项,并在框内写入内容.但是我没有看到根据需要加载内容的选项.
我已经粘贴下面的代码以供参考.
var map = null;
gmap_ready = function (){
var myLatlng = new google.maps.LatLng(43.834527,-103.564457);
var myOptions = {
zoom: 3,center: myLatlng,mapTypEID: google.maps.MapTypEID.roaDMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
function fnLoadMarkers(){ var LOCATIOns = [ ['S Dakota',43.834527,-103.564457,1],['Texas',31.428663,-99.418947,2],['California',36.668419,-120.249025,3],['Newyork',43.197167,-76.743166,4],['Missouri',38.410558,-92.73926,5] ]; setMarkers(map,LOCATIOns); } function setMarkers(map,LOCATIOns) { var image = 'images/marker.gif'; for (var i = 0; i < LOCATIOns.length; i++) { var currLOCATIOn = LOCATIOns[i]; var latLng = new google.maps.LatLng(currLOCATIOn[1],currLOCATIOn[2]); var marker = new google.maps.Marker({ position: latLng,map: map,icon: image,title: currLOCATIOn[0],zIndex: currLOCATIOn[3] }); google.maps.event.addListener(marker,'click',function() { var latitude = this.position.lat(); var longitude = this.position.lng(); window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A"); }); }
}
如果有任何提示如何实现这些结果,这将是有益的.此外,请指导,无论是通过Google API V3可能.
提前致谢,
问候
Srinivasan.C
这就是我这样做.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0,user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> // Initiate map function initialize(data) { // Make position for center map var myLatLng = new google.maps.LatLng(data.lng,data.lat); // Map options var myOptions = { zoom: 10,center: myLatLng,mapTypEID: google.maps.MapTypEID.HYBRID }; // Initiate map map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); // Info window element infowindow = new google.maps.InfoWindow(); // Set pin setPin(data); } // Show position function setPin(data) { var pinLatLng = new google.maps.LatLng(data.lng,data.lat); var pinMarker = new google.maps.Marker({ position: pinLatLng,data: data }); // Listen for click event google.maps.event.addListener(pinMarker,function() { map.setCenter(new google.maps.LatLng(pinMarker.position.lat(),pinMarker.position.lng())); map.setZoom(18); onItemClick(event,pinMarker); }); } // Info window trigger function function onItemClick(event,pin) { // Create content var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; // replace our Info Window's content and position infowindow.setContent(contentString); infowindow.setPosition(pin.position); infowindow.open(map) } </script> </head> <body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> <div id="map_canvas"> </div> </body> </html>
以上是大佬教程为你收集整理的javascript – Google Map API V3 – 点击标记将显示更多信息内容作为重叠式广告(如在Google Maps中)全部内容，希望文章能够帮你解决javascript – Google Map API V3 – 点击标记将显示更多信息内容作为重叠式广告(如在Google Maps中)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。