试图在动态地图中创建多个Google地图标记
问题描述:
我创建了一些包含一些链接的地图(点击时)使用jquery更改地图位置。试图在动态地图中创建多个Google地图标记
我试图为每个位置实现一个标记,但是要让标记显示在除默认设置之外的其他任何地图位置上。
我试图为每个纬度和长时间值设置一个标记。我试图使用下面的代码,但我得到的错误:TypeError:map.setPosition不是萤火虫控制台中的函数。
我的代码如下:
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/
任何人都可以帮助我吗?
答
我不知道为什么我不能让这个在小提琴工作...
但它在CodePen。
我修好了很多小东西。
- 使用
initialize
,而不是initMap
在谷歌API脚本调用回调...
因为这就是你如何命名你的函数。 - 将
map
声明为全局(在特定函数之外)。 - 所有关于地图的内容都应该在
initialize function
之内。 - 不要忘记加载jQuery,如果你使用它的事情就像你的3个链接!
代码:
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>
答
您必须在标记实例上的按钮单击以及上调用地图实例上的setCenter
方法。您的示例因功能范围而不起作用。您的的作用域为initialize
函数。您必须在之前删除var
以提升至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
});
});