在Google地图中添加两个标记点 [英] Add two marker points in google maps

问题描述

如何显示两个标记点？

  window.onload = function（）{
 $ b $'use strict'; 
 
 var latlng = new google.maps.LatLng（17.497859,78.391293）; 
 
 var styles = []; 
 
 var myOptions = {
 zoom：16，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 disableDefaultUI：true， 
滚动轮：false 
}; 
 
 var contentString ='< div id =content>'+ 
'< div id =siteNotice>'+ 
'< / div> ;'+ 
'< h4>我们在这里< / h4>'+ 
'< p>测试'< / p>'+ 
'< / div>' ; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：contentString 
}）; 
 
 var map = new google.maps.Map（document.getElementById（'map'），myOptions）; 
 
 var myLatlng = new google.maps.LatLng（17.497859,78.391293）; 
 
 var image ='../images/marker.png'; 
 var marker = new google.maps.Marker（{
 position：myLatlng，
 map：map，
 title：'Hello World！'，
 icon：image 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.open（map，marker）; 
}）; 
} 
  

解决方案

 < script type =text / javascript> 
 var locations = [
 ['ModelTown Lahore'，31.484665，74.326204，4]，
 ['TownShip Lahore'，31.451794，74.306549，5]，
 ['GreenTown Lahore '，31.435684,74.304661,3]，
 ['Mughalpura Lahore'，31.573261,74.363712,2]，
 ['WapdaTown Lahore'，31.425724,74.266895,1] 
]; 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：11，
 center：new google.maps.LatLng（31.435684 ，74.304661），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}）; 
 
 var infowindow = new google.maps.InfoWindow（）; 
 
 var marker，i; 
 
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
 map：map，
 animation：google.maps.Animation.BOUNCE，
}）; 
 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infowindow.setContent（locations [i ] [b]）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i））; 
} 
< / script> 
  

Below is my javascript code to display one marker point on google maps.

How can I display two marker points instead?

window.onload = function () {

    'use strict';

    var latlng = new google.maps.LatLng(17.497859,78.391293);

    var styles = [];

    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        scrollwheel: false
    };

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h4>We Are Here</h4>'+
        '<p>test'</p>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

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

    var myLatlng = new google.maps.LatLng(17.497859,78.391293);

    var image = '../images/marker.png';
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!',
        icon: image
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

解决方案

<script type="text/javascript">
    var locations = [
      ['ModelTown Lahore', 31.484665, 74.326204, 4],
      ['TownShip Lahore', 31.451794, 74.306549, 5],
      ['GreenTown Lahore', 31.435684, 74.304661, 3],
      ['Mughalpura Lahore', 31.573261, 74.363712, 2],
      ['WapdaTown Lahore', 31.425724, 74.266895, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: new google.maps.LatLng(31.435684, 74.304661),
        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,
            animation: google.maps.Animation.BOUNCE,
        });

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

这篇关于在Google地图中添加两个标记点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！