Question

以下是我在谷歌地图上显示一个标记点的JavaScript代码。

如何显示两个标记点？

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

Answer 1

只需添加google.maps.Marker的新实例及其自己的位置，标题和信息窗，并使用地图属性或标记对象的setMap（map）方法将其分配给地图。

就像下一个

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

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

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

    var image = '../images/marker.png';

    var marker1 = new google.maps.Marker({
        position: myLatlng1,
        map: map,
        title: 'Hello World!',
        icon: image
    });
    var marker2 = new google.maps.Marker({
        position: myLatlng2,
        map: map,
        title: 'Hello World!',
        icon: image
    });

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

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

Answer 2

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

Answer 3

请使用以下代码绘制任意数量的标记;-)

`<!DOCTYPE HTML>                                                            
 <html lang="en">                                                          
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Google Map</title>
  <style>
    #map{
        height: 600px;
        width: 100%;
    }
  </style>                                                                      
 </head>                                                                
<body>                                                                  
<h1>My Google Map`</h1>                                                   
  <div id="map"></div>


<script>
    function initMap(){
      //Map options
        var options = {
            zoom:9,
            center:{lat:42.3601, lng:-71.0589}
        }
        // new map
        var map = new google.maps.Map(document.getElementById('map'), options);
        // customer marker
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
        //array of Marrkeers
        var markers = [
          {
            coords:{lat: 42.4668, lng: -70.9495},img:iconBase,con:'<h3> This Is your Content <h3>'
          },
          {
            coords:{lat: 42.8584, lng: -70.9300},img:iconBase,con:'<h3> This Is your Content <h3>'
          },
          {
            coords:{lat: 42.7762, lng: -71.0773},img:iconBase,con:'<h3> This Is your Content <h3>'
          }
        ];

        //loopthrough markers
        for(var i = 0; i <markers.length; i++){
          //add markeers
          addMarker(markers[i]);
        }

        //function for the plotting markers on the map
        function addMarker (props){
          var marker = new google.maps.Marker({
            position: props.coords,
            map:map,
            icon:props.img
          });
          var infoWindow = new google.maps.InfoWindow({
            content:props.con,
          });
          marker.addListener("click", () => {
            infoWindow.open(map, marker);
          });
        }
    }
</script>

<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVR9eQglFrAKCpuSWlnCV9Ao9QXEwJJCA&callback=initMap"
  defer
></script>                                                             
</body>                                                       
</html>

`

在谷歌地图中添加两个标记点

3 个答案: