google maps api提供的示例代码如下
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
以下仅显示该位置的谷歌地图,没有标记。 我想知道如何通过提供纬度/经度参数来放置标记? 以及如何将我自己从数据库中提取的信息存储在该标记上?
最佳答案
这是一个JSFiddle Demo这向您展示了如何通过 Lat Lng 设置谷歌地图标记,以及何时点击会给您一个信息窗口(气泡):
这是我们的基本 HTML,点击后会在 map 上添加一个标记,其中包含 3 个超链接:
<div id="map_canvas"></div>
<a href='javascript:addMarker("usa")'>Click to Add U.S.A</a><br/>
<a href='javascript:addMarker("brasil")'>Click to Add Brasil</a><br/>
<a href='javascript:addMarker("argentina")'>Click to Add Argentina</a><br/>
首先我们设置了2个全局变量。一个用于 map ,另一个用于保存我们的标记的数组:
var map;
var markers = [];
这是我们创建谷歌地图的初始化:
function initialize() {
var latlng = new google.maps.LatLng(40.77627, -73.910965);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
然后我们创建 3 个经纬度位置,我们想在这些位置放置我们的标记:
var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);
在这里,我们创建了一个函数来根据传递给它的任何内容添加我们的标记。 myloc 将是美国、巴西或阿根廷,然后我们根据传递的参数创建标记。在 addMarker 函数中,我们检查并确保我们不会通过调用 for 循环在 map 上创建重复标记,如果我们已经创建了传递的参数,那么我们将退出函数并且不执行任何操作,否则我们创建标记并将其插入全局标记数组。创建标记后,我们通过执行 markers[markers.length-1]['infowin']
来附加一个信息窗口及其关联的标记。 markers.length-1 基本上只是获取新推送的标记在阵列上。在信息窗口中,我们使用 html 设置内容。这基本上是您放入气泡或信息窗口的信息(它可以是您可以使用天气 API 等填充的天气信息)。附加信息窗口后,我们使用 Google Map API 的 addListener 附加一个 onclick 事件监听器,当标记被点击时,我们想通过调用 this['infowin'].open( map, this)
其中 map 是我们的全局 map ,这是我们当前与 onclick 事件相关联的标记。
function addMarker(myloc) {
var current;
if (myloc == 'usa') current = usa;
else if (myloc == 'brasil') current = brasil;
else if (myloc == 'argentina') current = argentina;
for (var i = 0; i < markers.length; i++)
if (current.lat() === markers[i].position.lat() && current.lng() === markers[i].position.lng()) return;
markers.push(new google.maps.Marker({
map: map,
position: current,
title: myloc
}));
markers[markers.length - 1]['infowin'] = new google.maps.InfoWindow({
content: '<div>This is a marker in ' + myloc + '</div>'
});
google.maps.event.addListener(markers[markers.length - 1], 'click', function() {
this['infowin'].open(map, this);
});
}
当一切都完成后,我们基本上附加 window.onload
事件并调用初始化函数:
window.onload = initialize;
关于javascript - 如何按经纬度设置谷歌地图标记并提供信息气泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5319488/