javascript - 如何将两个位置添加到网站的同一个谷歌地图中

Question

我正在努力在同一个谷歌地图上包含两个位置。这里我包含了一个位置，如何包含纬度和经度为 51.626778、0.513829 的另一个位置。如果我包含与之前的印度地址相同的内容，通过添加逗号的纬度和经度手段，它不起作用。下面是我的JS和HTML

我已经使用 API“http://maps.google.com/maps/api/js?sensor=false”集成了谷歌地图

HTML:<div id="Map"></div>

CSS:#map{ width:100%; height:450px;}

JS:

var locations = [
    ['<div class="infobox"><h3 class="title"><a href="#contact">OUR INDIA ADDRESS</a></h3></div></div></div>',  12.996868, 80.209891, 2]

    ];

    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 13,
        scrollwheel: false,
        navigationControl: true,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        styles: [ { "stylers": [ { "hue": "#ff6501" },  {saturation: 20},
            {gamma: 1} ] } ],
        center: new google.maps.LatLng( 12.996868, 80.209891),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  

        marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map ,
        icon: 'images/marker1.png'
        });


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);

        }
      })(marker, i));
    }

请指导我，谢谢您的帮助。

编辑:是的，使用标记同时显示多个位置

Answer 1

你的位置变量应该是这样的

   var locations = [ ['OUR INDIA ADDRESS', 12.996868, 80.209891, 2],['OUR INDIA ADDRESS', 51.626778, 0.513829, 2]]

在下面的示例中，它清楚地展示了如何向 map 添加多个位置。 这是示例，您可以在其中添加多个标记图标，单击后我们可以放置一个标记，并在信息窗口中显示地址。

<script>
var locations = [
       ['Hyderabad', 17.38504, 78.48667],
       ['Chennai', 13.08268, 80.27072],
       ['Bangalore', 12.97160, 77.59456],
       ['Mumbai', 19.07598, 72.87766],
       ['Pune', 18.52043, 73.85674]
];
var Hyderabad = new google.maps.LatLng(17.38504, 78.48667);
var Chennai = new google.maps.LatLng(13.08268, 80.27072);
var Bangalore = new google.maps.LatLng(12.97160, 77.59456);
var mumbai = new google.maps.LatLng(19.07598, 72.87766);
var map = null;
function initialize() {
    var mapProp = {
        center: Hyderabad,
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            content: locations[i][0]
        });
        var infowindow = new google.maps.InfoWindow({
            content: locations[i][0]
        });
        marker.setMap(map);
    }
    var geocoder = new google.maps.Geocoder;
    var infowindow = new google.maps.InfoWindow;

    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
        geocodeLatLng(geocoder,map,infowindow,event.latLng)
    });

}

function placeMarker(location) {
    debugger;
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true
    });
    //var infowindow = new google.maps.InfoWindow({
    //    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
    //});
    //infowindow.open(map, marker);
    //geocodeLatLng(geocoder,map,infowindow);
}

function geocodeLatLng(geocoder, map, infowindow, latlang) {
    debugger;
    //var input = latlang;
    //var latlngStr = input.split(',', 2);
    var latlng = { lat: parseFloat(latlang.lat()), lng: parseFloat(latlang.lng()) };
    geocoder.geocode({'location': latlng}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                //map.setZoom(11);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                infowindow.setContent(results[1].formatted_address);
                infowindow.open(map, marker);
            } else {
                window.alert('No results found');
            }
        } else {
            window.alert('Geocoder failed due to: ' + status);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);