繁体   English   中英

如何将两个位置添加到网站的同一Google Map中

[英]How can I add two locations into same google map for website

我正在努力在同一张Google地图上包括两个位置。 在这里,我包含了一个位置,如何包含纬度和经度分别为51.626778,0.513829的另一个位置。 如果我添加了与以前的印度地址相同的地址,则通过添加“纬度”和“经度”以逗号表示,它不起作用。 下面是我的JS和HTML

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

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

CSS: #map{ width:100%; height:450px;} #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));
    }

请对此进行指导,谢谢您的帮助。

编辑:是的,用标记同时显示多个位置的相同方法

您的位置变量应如下所示

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

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

<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);

您的代码有效。 只需在数组中创建一个新项目:

var locations = [ 
    ['OUR INDIA ADDRESS', 12.996868, 80.209891, 2],
    ['OUR INDIA ADDRESS 2', 12.976868, 80.209891, 2]
];

您以示例[51.626778,0.513829]给出的坐标为欧洲。

参见工作方式: http : //jsfiddle.net/adrianogodoy/325ukwsg/2/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM