Question

我创建了一个包含一些链接的地图，这些链接（点击时）会使用jquery更改地图位置。

我已经尝试为每个位置实现一个标记，但是要将标记显示在除默认设置之外的任何其他地图位置上。

我正在尝试为每个lat和long值设置一个标记。我试图使用以下代码，但我收到错误：TypeError：map.setPosition不是firebug控制台中的函数。

我的代码如下：

HTML：

<a id="link-aberdeen" href="javascript:void(0)" class="button1">Munich</a>    
<a id="link-glasgow" href="javascript:void(0)" class="button2">Oxford</a>    
<a id="link-glasgow" href="javascript:void(0)" class="button3">Glasgow</a>   

<div id="map-canvas"></div>

CSS：

#map-canvas { background: #eaeaea none repeat scroll 0 0; height: 300px; width: 100%; }

JAVASCRIPT：

function initialize() {

map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(48.1293954,12.556663), //Setting Initial Position
zoom: 10
});

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(48.1293954,12.556663),
center: new google.maps.LatLng(48.1293954,12.556663),
zoom: 10
});

}


function newLocation(newLat,newLng) {
map.setCenter({
    lat : newLat,
    lng : newLng
});

map.setPosition({
    lat : newLat,
    lng : newLng
});

}

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


$(document).ready(function () {

$(".button1").on('click', function () {
  newLocation(48.1293954,12.556663);
});

$(".button2").on('click', function () {
  newLocation(51.7163950,-1.2196100);
});

$(".button3").on('click', function () {
  newLocation(55.8610240,-4.2614560);
});

});

我还有一个小提琴我一直在测试，请参阅https://jsfiddle.net/xxfairydragonxx/7j31df1v/

任何人都可以帮我吗？

Answer 1

您必须在按钮点击时调用地图实例上的setCenter方法以及标记实例上的setPosition。由于函数范围，您的示例不起作用。您的marker范围限定为initialize函数。您必须先删除var之前的marker以提升到global / window对象，或在initialize函数之外创建变量声明。

var map;
var marker;

function initialize() {
  map = new google.maps.Map(…);
  marker = new google.maps.Marker(…);
}

$('.button').on('click', function() {
  map.setCenter({
    lat: LATITUDE,
    lng: LONGITUDE
  });

 marker.setPosition({
    lat: LATITUDE,
    lng: LONGITUDE
 });
});

Answer 2

我不知道为什么我不能让它在小提琴中工作...... 但它适用于CodePen。

我修了许多小东西。

在Google API脚本调用回调中使用initialize代替initMap ...由于这是您对函数的命名方式。
将map声明为全局（在特定函数之外）。
关于地图的所有内容都应该在initialize function。
如果您将jQuery用于3个链接之类的东西，请不要忘记加载jQuery！

代码：

var map;

function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(48.1293954, 12.556663), //Setting Initial Position
        zoom: 10
    });

    var marker = new google.maps.Marker({
        map: map,

        position: new google.maps.LatLng(48.1293954, 12.556663),
        center: new google.maps.LatLng(48.1293954, 12.556663),
        zoom: 10
    });

    function newLocation(newLat, newLng) {
        map.setCenter({
            lat: newLat,
            lng: newLng
        });

        new google.maps.Marker({
            map: map,
            position:{
                lat: newLat,
                lng: newLng
            }
        });
    }


    $(".button1").on('click', function() {
        newLocation(48.1293954, 12.556663);
    });
    $(".button2").on('click', function() {
        newLocation(51.7163950, -1.2196100);
    });
    $(".button3").on('click', function() {
        newLocation(55.8610240, -4.2614560);
    });

}

API调用：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7_p0NkDTQQmn8ZVJosJJ-3Xr93x-tVVo&callback=initialize" async defer></script>

尝试在动态地图中创建多个谷歌地图标记

2 个答案: