[英]Add multiple markers in google maps
我正在將google maps添加到我的網站上,並且能夠獲取我的當前位置,但是現在我想在地圖上的不同網絡位置添加標記。我該怎么做?我獲取當前位置的代碼如下:
<div id="map"></div>
<script>
function initMap() {
var myLatlng = {lat: 40.59726025535419, lng: 80.02503488467874};
var map = new google.maps.Map(document.getElementById('map'),{
center:myLatlng,
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Your Location.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn7svjyYLYuP-EzakUjobLmpPi41l1_hw&callback=initMap">
</script>
創建新的google.maps.Map(以您的情況為變量map )后
var marker = new google.maps.Marker({
position: {lat: 40.59726025535419, lng: 80.02503488467874},
map: map,
title: 'Hello World!'
});
var marker2 = new google.maps.Marker({
position: {lat: 40.59726025535419, lng: 80.02503488467874},
map: map,
title: 'Hello World!'
});
來源: https : //developers.google.com/maps/documentation/javascript/examples/marker-simple#try-it-yourself
演示-更新。 https://jsbin.com/bazoco/edit?html,控制台,輸出
function appendMarker(map, latitude, longitude, text) {
var pos = {lat: latitude, lng: longitude};
var markerOption = {
position: pos,
map: map,
title: text || 'Hello World!'
};
return new google.maps.Marker(markerOption);
}
//Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Your Location.');
map.setCenter(pos);
//could you add this code below and test ?
var markerOp = appendMarker(map, position.coords.latitude, position.coords.longitude, 'Hello');
var markerOp2 = appendMarker(map, position.coords.latitude + 0.005, position.coords.longitude + 0.005, 'Hello');
//could you add this code above and test ?
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
您可以創建標記對象並將latlng對象傳遞給它
首先使谷歌地圖LatLng對象
var latlng = new google.maps.LatLng(latitude, longitude);
然后將此latlng對象用作標記對象中的位置
var marker = new google.maps.Marker({position: latlng,map: map,})
marker.setMap(map);
var myLatlng = {lat: 40.59726025535419, lng: 80.02503488467874};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Your LatLng!'
});
var marker2 = new google.maps.Marker({
position: {lat: 40.60, lng: 80.1},
map: map,
title: 'Your second marker!'
});
var marker3 = new google.maps.Marker({
position: {lat: 40.62, lng: 80.5},
map: map,
title: 'Your third marker!'
});
下次請先閱讀文檔:-)
工作提琴: https : //jsfiddle.net/kLndyr00/1/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.