[英]Add Markers to Google Maps from JS Array
我有數組:
var stops = [];
stops[1] = {name:'One', lat:51.9219465100951 ,long:-8.61797176722262};
stops[2] = {name:'Two', lat:51.9270744 ,long:-8.6105043};
stops[3] = {name:'Three)', lat:51.9254898 ,long:-8.6100269};
我正在嘗試遍歷並在地圖上顯示這些標記...
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.933596, lng: -8.578540},
zoom: 14,
mapTypeId: 'hybrid'
});
for(var i=0; i<=stops.length; i++){
var mypos = {stops[i].lat, stops[i].long};
var marker = new google.maps.Marker({
position: mypos,
map: map,
title: stops[i].name
});
}
}
地圖上沒有標記。
我在下一行收到[的意外令牌錯誤。 var mypos = {stops [i] .lat,stops [i] .lng};
我已對此進行了更改,但仍然無法正常工作。
當您真正需要做的只是通過stops[i]
,您正在創建一個無效的對象
var mypos = {stops[i].lat, stops[i].lng};
應該
var mypos =stops[i];
但是還有另一個問題,數組索引從零開始,但是您從一個開始
創建初始數組的一種簡單得多的方法是
var stops = [
{name:'One', lat:51.9219465100951 ,lng:-8.61797176722262},
{name:'Two', lat:51.9270744 ,lng:-8.6105043},
{name:'Three)', lat:51.9254898 ,lng:-8.6100269}
];
請注意,屬性名稱long
已更改為lng
以匹配地圖腳本使用的屬性
mypos必須是:
var mypos = {lat: stops[i].lat, lng: stops[i].long};
如果沒有“ lat:”和“ lng:”,則試圖將對象聲明為數組。 'position'期望使用LatLngLiteral(請參見上文)或LatLng對象,其聲明如下:
var mypos = new google.maps.LatLng(stops[i].lat, stops[i].long};
檢查代碼示例:
$(window).load(function() { $(document).ready(function() { var map; var elevator; var myOptions = { zoom: 1, center: new google.maps.LatLng(0, 0), mapTypeId: 'terrain' }; map = new google.maps.Map($('#map_canvas')[0], myOptions); var addresses = ['Norway', 'Africa', 'Asia', 'North America', 'South America']; for (var x = 0; x < addresses.length; x++) { $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function(data) { var p = data.results[0].geometry.location var latlng = new google.maps.LatLng(p.lat, p.lng); new google.maps.Marker({ position: latlng, map: map }); }); } }); }); //]]>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> <style type="text/css"> #map_canvas { width: 500px; height: 500px; } </style> <div id="map_canvas"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.