[英]How to add multiple markers in google maps?
我正在开发一个使用 PhoneGap 库、ADT java 插件、HTML 和 jQuery 的项目。 我使用下面的代码进行地理定位,但我不知道如何使用 infowindows 添加多个标记。 添加多个标记的正确方法是什么?
我使用的脚本是这样的:
window.plebeosaur = window.plebeosaur || {
map: function() {
var // get the page's canvas container
mapCanvas = document.getElementById( 'map_canvas' ),
// define the Google Maps options
map_options = {
zoom: 17,
// let's initially center on downtown Austin
center: new google.maps.LatLng( 30.264664, -97.747378 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
// then create the map
map = new google.maps.Map( mapCanvas, map_options ),
myMarker = 0,
displayLocation = function( position ) {
// create a new LatLng object for every position update
var myLatLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );
// build entire marker first time thru
if ( !myMarker ) {
// define our custom marker image
var image = new google.maps.MarkerImage(
'bluedot.png',
null, // size
null, // origin
new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
);
// then create the new marker
myMarker = new google.maps.Marker({
flat: true,
icon: image,
map: map,
optimized: false,
position: myLatLng,
title: 'I might be here',
visible: true
});
// just change marker position on subsequent passes
} else {
myMarker.setPosition( myLatLng );
}
// center map view on every pass
map.setCenter( myLatLng );
},
handleError = function( error ) {
var errorMessage = [
'We are not quite sure what happened.',
'Sorry. Permission to find your location has been denied.',
'Sorry. Your position could not be determined.',
'Sorry. Timed out.'
];
alert( errorMessage[ error.code ] );
},
// cache the userAgent
useragent = navigator.userAgent;
// set the map canvas's height/width (Google Maps needs inline height/width)
mapCanvas.style.width = mapCanvas.style.height = '100%';
// allow iPhone or Android to track movement
if ( useragent.indexOf('iPhone') !== -1 || useragent.indexOf('Android') !== -1 ) {
navigator.geolocation.watchPosition(
displayLocation,
handleError,
{
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 27000
}
);
// or let other geolocation capable browsers to get their static position
} else if ( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition( displayLocation, handleError );
}
}
};
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
for (var i=0;i<beaches.length;i++)
{
// add your markers here
}
您可以通过填充位置数组来添加多个标记,然后迭代数组以将每个标记添加到地图中。 您还可以创建一个函数来为信息窗口添加事件监听器。
for (i = 0; i < LocationsForMap.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(LocationsForMap[i][1], LocationsForMap[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(LocationsForMap[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.