如何为我当前的标记设置自定义标记?

时间:2017-07-04 08:04:26

标签: javascript google-maps google-maps-api-3

如何为当前标记设置自定义标记?

我试过这个链接,但这不适合我How do you create a Marker with a custom icon for google maps API v3?

这里是我的代码

      var markers = [
       {
           "lat": '3.214608',
           "lng": '101.639114',
       },
       {
           "lat": '3.214790',
           "lng": '101.640928',
       }
       ];

       window.onload = function () {
           LoadMap();
       }

       function LoadMap() {
           var mapOptions = {
               center: { lat: 3.214608, lng: 101.639114},
               zoom: 16,
               mapTypeId: google.maps.MapTypeId.ROADMAP
           };
           var map = new google.maps.Map(document.getElementById("map"), mapOptions);

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

           for (var i = 0; i < markers.length; i++) {
               var data = markers[i];
               var myLatlng = new google.maps.LatLng(data.lat, data.lng);
               var marker = new google.maps.Marker({
                   position: myLatlng,
                   map: map,

               });
           }

       }

1 个答案:

答案 0 :(得分:0)

添加一个带有图像链接的全局变量:

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

要更改大小/比例等,请修改代码以包含:

  var icon = {
    url: image,
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0, 0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
  }

添加标记时,使用图标变量,并分配给图标变量

 marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: simplerweb,
    icon: icon// assign image here
  });

JSFiddle:https://jsfiddle.net/cmjcs5eL/18/