Question

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

标记的链接不起作用 - 我在日志中收到以下错误消息：Uncaught TypeError：无法读取未定义的属性'_ e3 '
当页面加载时，地图首先在默认位置设置，然后在运行该功能时使用特定位置进行更新。无论如何我可以立即加载正确的位置吗？

以下是具有特定参数的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：您收到该错误，因为您将标记的eventlistener放在错误的位置。在那里，它不知道变量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();

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

2 个答案: