Google Maps API：标记链接不起作用

Question

我一直在使用 Google Maps API 并设法做我想做的事。基本上，我正在使用 HTML 中的一些特定参数创建自定义地图。地图运行良好，标记出现在正确的位置，但是我有两个无法解决的小问题：

1. 标记的链接不起作用 - 我在日志中收到以下错误消息：Uncaught TypeError: Cannot read property '_e3' of undefined

2. 当页面加载时，地图首先设置在默认位置，然后在函数运行时更新为特定位置。无论如何我可以让它一次加载到正确的位置吗？

这是带有特定参数的 HTML 代码：

<div id="map" data-map-address="120-124 Curtain Road, London, EC2A 3SQ" data-map-link="http://my-destination-link.com"></div>

这是我用来生成地图的 JavaScript：

var map,
    geocoder,
    mapElem = document.getElementById('map'),
    mapHolder = $('#map'),
    mapAddress = mapHolder.attr("data-map-address"),
    mapUrl = mapHolder.attr("data-map-link"),
    image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png',
        new google.maps.Size(123, 123),
        new google.maps.Point(0,0),
        new google.maps.Point(11, 96));

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(51.51121, -0.11982),
        mapOptions = {
        zoom: 16,
        disableDefaultUI: true,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(mapElem, mapOptions);
}

function codeAddress() {
    geocoder.geocode( { 'address': mapAddress}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                url: mapUrl,
                title: 'Click here to emlarge the map',
                icon: image
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'load', codeAddress);
google.maps.event.addListener(marker, 'click', function() {
    window.location.href = marker.url;
});

如果有人能帮助我解决这两个问题，我将不胜感激。我在网上查看并尝试了我找到的解决方法，但我无法使其正常工作。

谢谢！

Answer 1

1：我会将codeAddress() 放入您的初始化中以获取onload 位。初始化时不要设置中心，而是等待codeAddress() 找到并设置位置。

2：您收到该错误是因为您将标记的事件侦听器放在错误的位置。在那里它不知道变量marker 是什么。您需要将其放置在创建标记的位置（在您的 codeAddress() 函数内。

var map,
    geocoder,
    mapElem = document.getElementById('map'),
    mapHolder = $('#map'),
    mapAddress = mapHolder.attr("data-map-address"),
    mapUrl = mapHolder.attr("data-map-link"),
    image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png',
        new google.maps.Size(123, 123),
        new google.maps.Point(0,0),
        new google.maps.Point(11, 96));

function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
            zoom: 16,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    map = new google.maps.Map(mapElem, mapOptions);

    codeAddress();
}

function codeAddress() {
    geocoder.geocode( { 'address': mapAddress}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                url: mapUrl,
                title: 'Click here to emlarge the map',
                icon: image
            });

            // Add your event listener 
            google.maps.event.addListener(marker, 'click', function() {
                window.location.href = marker.url;
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });


}

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

Answer 2

不确定链接失败的原因，但要使地图立即加载到正确的位置，您必须先对位置进行地理编码，一旦您从地图 api 获得响应，您就可以使用正确的起始位置构建您的地图。

var map,
geocoder,
mapElem = document.getElementById('map'),
    mapHolder = $('#map'),
    mapAddress = mapHolder.attr("data-map-address"),
    mapUrl = mapHolder.attr("data-map-link"),
    image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png',
    new google.maps.Size(123, 123),
    new google.maps.Point(0, 0),
    new google.maps.Point(11, 96));

function initialize(geoLocation) {
    mapOptions = {
        zoom: 16,
        disableDefaultUI: true,
        center: geoLocation,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(mapElem, mapOptions);
}

function codeAddress() {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': mapAddress
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            initialize(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                url: mapUrl,
                title: 'Click here to enlarge the map',
                icon: image
            });
            google.maps.event.addListener(marker, 'click', function () {
                window.location.href = marker.url;
            });
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}
//Call codeAddress to initialize the geocoding.  When that returns it will initialize the map with the geocode location
codeAddress();