0

我一直在玩 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;
});

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

谢谢！

4

2 回答 2

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);
于 2013-08-29T12:31:16.950 回答
0

不确定链接失败的原因，但要使地图立即加载到正确的位置，您必须先对位置进行地理编码，一旦从地图 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();
于 2013-08-29T12:27:28.183 回答