如何使用位置标记和信息更新嵌入式谷歌地图的超链接

时间:2013-07-05 15:30:35

标签: javascript google-maps-api-3

我在这里看到类似的问题没有答案,或者他们需要刷新页面,我希望我能从比我更熟悉Google Maps API的人那里得到答案,而且我'这样就可以在不刷新页面的情况下工作。

我在网页上有一个嵌入式Google地图,我在网页的HTML中有一个位置列表。

我希望这样当访问者点击其中一个位置时,它会在嵌入式地图上显示该位置。

听起来很简单吧?我已经在API上阅读了2天的文档,而我似乎无法找到我想要的内容。

我期待能够在点击将设置位置/标记/ InfoBox的链接上调用JS函数。我基本上需要知道的是如何通过链接与嵌入式地图进行通信。我可以自己整理infoBox和其他人。

非常感谢您阅读!

如果您想知道,我使用以下JS来嵌入谷歌地图:

function initialize() {

    var mapOptions = {
        zoom: 8,
        panControl: false,
        rotateControl: false,
        scaleControl: false,
        streetViewControl: false,
        center: new google.maps.LatLng(51.004106,-114.135442),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }   
    var map = new google.maps.Map(document.getElementById("header"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

1 个答案:

答案 0 :(得分:0)

你可能想要创建一个函数来添加这样的标记:

function addMarker(map, lat, long, title, popupHtml) {
    var latLong = new google.maps.LatLng(lat, long);
    var markerOpts = { position: latLong, map: map, title: title };
    var marker = new google.maps.Marker(markerOpts);
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(popupHtml);
        infoWindow.open(map, marker);
    });
}

然后在初始化函数中执行某些操作以将函数附加到链接。