带有多个标记的Gmap

时间:2014-11-14 14:18:54

标签: javascript google-maps google-maps-api-3

嗨我有这个代码用于我的地图联系,我想再添加2个地方就可以了 我请:

/* --- Google Map --- */ 
  var mapOptions = {
    center: new google.maps.LatLng(49.5564021,5.8628159),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
  var image = "img/marker.png";
  var marker = new google.maps.Marker({
    position: mapOptions.center,
    map: map,
    icon: image
  });

2 个答案:

答案 0 :(得分:0)

您需要定义第二个和第三个标记的位置,并在添加第一个标记时添加它们

  var image = "img/marker.png";
  var marker = new google.maps.Marker({
    position: mapOptions.center,
    map: map,
    icon: image
  });

  var position2={lat:49.555,lng:5.861};
  var marker2 = new google.maps.Marker({
    position: position2,
    map: map,
    icon: image
  });

  var position3={lat:49.557,lng:5.863};
  var marker3 = new google.maps.Marker({
    position: position3,
    map: map,
    icon: image
  });

当然,如果您在循环中添加标记或声明一个函数来封装该任务,那么还有改进的余地。

答案 1 :(得分:-2)

我使用此功能向地图添加其他标记: item是我想要添加到地图的自定义对象(在这种情况下是商店的详细信息)。

我确定你可以从这里找到你需要的东西。

function _setDealer (item) {

    //the position of the marker
    var myLatlng = new google.maps.LatLng(item.Latitude, item.Longitude),
        markerOptions = {
            animation: google.maps.Animation.DROP,
            position: myLatlng,
            //your map instance
            map: map,
            country: {
                name: (item.Country ? item.Country.Name : ''),
                code: (item.Country ? item.Country.Code : '')
            },
            geocoding: {
                coordinate: {
                    latitude: (item.Geocoding ? item.Geocoding.Coordinate.Latitude : false),
                    longitude: (item.Geocoding ? item.Geocoding.Coordinate.Longitude : false)
                },
                state: (item.Geocoding ? item.Geocoding.State : false)
            }
        },
        classification = item.Classification.toLowerCase(),
        image = new google.maps.MarkerImage(
            mapOptions.mapIcons[classification].normal.filename,
            new google.maps.Size(mapOptions.mapIcons[classification].normal.size[0], mapOptions.mapIcons[classification].normal.size[1]),
            new google.maps.Point(0, 0),
            new google.maps.Point(mapOptions.mapIcons[classification].normal.center[0], mapOptions.mapIcons[classification].normal.center[1])
        ),
        marker = new google.maps.Marker(markerOptions);

    marker.setIcon(image);

}