显示多个标记在阵列 - 谷歌地图API

如何清洁这使得代码处理多个列表更好？我已经看到了一些代码示例，可以从数组中获取标记信息，但我似乎无法使其工作。显示多个标记在阵列 - 谷歌地图API

的标记需要有 “图标：”， “URL” 和 “标题：” 属性。 “图标：”，所以我可以更改每个标记外观，“网址：”指向专用于每个标记的页面和“标题”，只是在悬停时添加标记名称。

我还需要在脚本中的数组，因为我不是从数据库或类似的东西收集它。

我很绿色，当涉及到JavaScript和谷歌地图API，任何帮助，将不胜感激。

function createMap(lat, lng, zoomVal) { 
var mapOptions = { center: new google.maps.LatLng(lat, lng),  
zoom: zoomVal, 
scrollwheel: false, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 


var myLatlnglow = new google.maps.LatLng(23.654332,-79.387867); 

var markerlow1 = new google.maps.Marker({ 
    position: myLatlnglow, 
    icon: 'images/map-dot.png', 
    map: map, 
    url: '#', 
    title: 'Name' 
}); 
google.maps.event.addListener(markerlow1, 'click', function() { 
window.location.href = markerlow1.url; 
}); 


var myLatlnglow = new google.maps.LatLng(23.688458,-79.300619); 

var markerlow = new google.maps.Marker({ 
    position: myLatlnglow, 
    icon: 'images/map-dot.png', 
    map: map, 
    url: '#', 
    title: 'Name' 
}); 
google.maps.event.addListener(markerlow, 'click', function() { 
window.location.href = markerlow.url; 
}); 


} 

var map; 
function initialize() { 
createMap(23.668493, -29.410812,12); 
    if(navigator.geolocation) { 
    success = function(position) {  
createMap(position.coords.latitude, position.coords.longitude,13); 
}; 
error = function() { 
createMap(23.648493, -29.410812,12); 
}  
navigator.geolocation.getCurrentPosition(success, error); 
} 
}

来源

2012-07-14 Be Right Bacon

有许多方法来创建和组织标记。为了量身定制的答案，解释你的数据是如何组织的，以及你希望如何操纵它们。输入数据格式如何？你打算直接在JavaScript中输入标记数据还是从外部来源如数据库或JSON源中提取数据？ – 2012-07-14 21:02:00

@MaryAnne感谢您的回复，不知道我是否适当地编辑我的问题，但我想直接在JavaScript进入标记数据。我知道为了优化的缘故，我应该使用某种表或数据库，但我对数据库感到恐惧。 – 2012-07-14 22:30:08

如果我是你，我会为了可读性而创建对象的对象。如果你必须有效率，并要节省空间和类型，以及阵列替换对象，并通过索引地址数据（0,1,2 ......）

这里的a demo

// inside function createMap(...) 
     ... 
    markerData = { 
     bing: { 
      lat: 23.654332, 
      lng: -79.387867, 
      icon: "http://labs.google.com/ridefinder/images/mm_20_red.png", 
      url: "http://www.bing.com/", 
      title: "some search engine" 
     }, 
     yahoo: { 
      lat: 23.688458, 
      lng: -79.300619, 
      icon: "http://labs.google.com/ridefinder/images/mm_20_blue.png", 
      url: "http://www.yahoo.com/", 
      title: "Great free games" 
     } 
    }; 

    for (markerId in markerData) { 
     markers[markerId] = createMarker(markerData[markerId]); 
    } 

    markers['bing'].setTitle("new title"); 
} 

function createMarker(data) { 
    var myLatLng = new google.maps.LatLng(data.lat, data.lng); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     icon: data.icon, 
     map: map, 
     title: data.title 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     window.location.href = data.url; 
    }); 

    return marker; 
}

它还应该稍后帮助保存对创建的标记的引用，我使用全局对象markers和相同的ID。

var map; 
var markers = {};

如果以后需要通过markers更改标记属性可被访问。

markers['bing'].setTitle("new title");

来源

2012-07-14 23:37:33

显示多个标记在阵列 - 谷歌地图API

回答

相关问题