Question

我正在使用Google Map Api。

如何在点击特定点时打开弹出窗口。

该弹出窗口应包含有关该点的信息。

这是我的代码：

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
    var mapProp = {
        center:myCenter,
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        };

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var arr =  [{latitude_chargement:60.05,longitude_chargement:-43.1667},{latitude_chargement:45.7604,longitude_chargement:5.68552},{latitude_chargement:48.853873,longitude_chargement:2.351074}];


    for(i = 0; i < arr.length; i++) 
    {  
        marker =  new google.maps.Marker({
        position: new google.maps.LatLng(arr[i].latitude_chargement, arr[i].longitude_chargement),
        map: map,
        icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
        });
    }
    marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

首先获取鼠标点击位置的纬度经度。然后使用谷歌地图的反向地理编码获取地址。如果反向地理编码成功，则创建新的标记和信息窗口。

以下代码可以帮助您完成工作：

//Attach click event to google map
google.maps.event.addListener(map, 'click', function(event) {
    marker.push(new google.maps.Marker({position: event.latLng, map: map}));//Push the new marker into marker array 
var markIndex = marker.length-1;
//use geocoder to get address via reverse geocoding
geocoder.geocode({'latLng': event.latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) { // check if reverse geocoding is success
   //create new info window
   infowindow[marker.length-1] = new google.maps.InfoWindow({
          content: results[1].formatted_address
    });
//Add click event for marker for showing info window 
google.maps.event.addListener(marker[markIndex], 'click', function() {
            infowindow[markIndex].open(map,marker[markIndex]);
    });
}

});

您可以找到工作演示here

Answer 2

我想这是做到这一点的方法：

for(i = 0; i < arr.length; i++) 
{  
    marker =  new google.maps.Marker({
    position: new google.maps.LatLng(arr[i].latitude_chargement, arr[i].longitude_chargement),
    map: map,
    icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
    content: '<div class="mydivclass"> <h2>Myheading</h2> <p>mytextblock</p> </div>',
    });
}

Onclick打开Popup，其中包含Google Map Api中的详细信息

2 个答案: