Question

如何清除此代码以便代码更好地处理多个列表？我已经看到一些代码示例从数组中提取标记信息，但我似乎无法让它工作。

标记需要具有“icon：”，“url：”和“title：”属性。 “icon：”所以我可以更改每个标记的外观，“url：”指向专用于每个标记的页面，“title”只是为了在悬停时添加标记名称。

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

对于javascript和google maps 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);  
} 
}

Answer 1

如果我是你，我会为了便于阅读而制作一个物体。如果你必须有效率，并希望节省空间和打字，用数组替换对象并通过索引（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");

在阵列中显示多个标记 - Google Maps API

1 个答案: