使用JavaScript代码在Google地图中添加其他位置不同的标记

如何向Google地图添加更多位置,并让它们在每个不同的位置都获得相同的标记图标?


这是代码:


$(function() {

  function initMap() {

    var location = new google.maps.LatLng(50.0875726, 14.4189987);


    var mapCanvas = document.getElementById("map");

    var mapOptions = {

      center: location,

      zoom: 16,

      panControl: false,

      scrollwheel: false,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    var map = new google.maps.Map(mapCanvas, mapOptions);


    var markerImage = "marker.png";


    var marker = new google.maps.Marker({

      position: location,

      map: map,

      icon: markerImage

    });


    var contentString =

      '<div class="info-window">' +

      "<h3>Info Window Content</h3>" +

      '<div class="info-content">' +

      "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>" +

      "</div>" +

      "</div>";


    var infowindow = new google.maps.InfoWindow({

      content: contentString,

      maxWidth: 400

    });


    marker.addListener("click", function() {

      infowindow.open(map, marker);

    });


    var styles = [

      {

        featureType: "landscape",

        stylers: [{ saturation: -100 }, { lightness: 65 }, { visibility: "on" }]

      },

      {

        featureType: "poi",

        stylers: [

          { saturation: -100 },

          { lightness: 51 },

          { visibility: "simplified" }

        ]

      },

      {

        featureType: "road.highway",

        stylers: [{ saturation: -100 }, { visibility: "simplified" }]

      },

      {

        featureType: "road.arterial",

        stylers: [{ saturation: -100 }, { lightness: 30 }, { visibility: "on" }]

      },

      {

 

非常感谢您的帮助,我仍在学习中。


鸿蒙传说
浏览 218回答 1
1回答

LEATH

您可以创建一个包含坐标(经度和纬度)的对象数组。使用forEach循环数组通,并作出标记。var listOfLocations = [&nbsp; {lat: 18.906286,lng: 19.102439},&nbsp; &nbsp; &nbsp; //Somewhere in Africa&nbsp; {lat: 8.331083,lng: 105.549002},&nbsp; &nbsp; &nbsp; //Somewhere near Vietnam&nbsp; {lat: -27.440040,lng: 135.067341},&nbsp; &nbsp; //Somewhere in Australia&nbsp; {lat: -14.338904,lng: -51.507365},&nbsp; &nbsp; //Somewhere in Brazil];listOfLocations.forEach(function(o) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//Loop thru the array&nbsp; var marker = new google.maps.Marker({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//Make the marker and add to the map&nbsp; &nbsp; position: o,&nbsp; &nbsp; map: map,&nbsp; &nbsp; icon: markerImage&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//Set image&nbsp; });})注意:无需new google.maps.LatLng根据Google Map Marker Doc制作对象
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript