如何添加自定义地图指针

how to add customize map pointer?

本文关键字：自定义 地图 指针 添加 何添加      更新时间：2023-09-26

我想在我的地图中插入自定义指针。但我不知道如何在map

中插入自定义指针
google.maps.event.addDomListener(window, 'load', init);
 function init() {
     var mapOptions = {
              zoom: 12,
              panControl: false,
              zoomControl: true,
              zoomControlOptions: {
                 style: google.maps.ZoomControlStyle.SMALL,
                 position: google.maps.ControlPosition.LEFT_BOTTOM
              }, 
              draggable: false,
              mapTypeControl: false,
              streetViewControl: false,
              scaleControl: true,
              scrollwheel: false,
              navigationControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: new google.maps.LatLng(6.000841, 80.342339), // New York
              styles: [
                {"featureType":"water",
                 "elementType":"geometry",
                 "stylers":[{"color":"#d1cdc0"}]},
                {"featureType":"landscape",
                 "elementType":"geometry",
                 "stylers":[{"color":"#f1ede0"}]},
                {"featureType":"poi", "elementType":"geometry",
                 "stylers":[{"color":"#d8d4c7"}]},
                {"featureType":"road.highway", "elementType":"geometry",
                 "stylers":[{"color":"#c6c2b5"}]},
                {"featureType":"road.arterial","elementType":"geometry",
                 "stylers":[{"color":"#cecabd"},{"lightness":-20}]},
                {"featureType":"road.local","elementType":"geometry",
                 "stylers":[{"color":"#d1cdc0"},{"lightness":-17}]},
                {"elementType":"labels.text.stroke",
                 "stylers":[{"color":"#ffffff"},{"visibility":"on"},{"weight":0.9}]},
                {"elementType":"labels.text.fill",
                 "stylers":[{"visibility":"on"},{"color":"#1c180b"}]},
                {"featureType":"poi","elementType":"labels",
                 "stylers":[{"visibility":"simplified"}]},
                {"elementType":"labels.icon",
                 "stylers":[{"visibility":"off"}]},
                {"featureType":"transit","elementType":"geometry",
                 "stylers":[{"color":"#c2beb1"},{"lightness":-10}]},
                {},
                {"featureType":"administrative","elementType":"geometry",
                 "stylers":[{"color":"#c2beb1"},{"weight":0.7}]}
              ]
      };
      var mapElement = document.getElementById('map');
      var map = new google.maps.Map(mapElement, mapOptions);
}
var markerImage = 'map_pointer.png';
var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: markerImage
});

您可以简单地设置自定义图像的相对地址:

var markerImage = 'map_pointer.png';

例如:

var markerImage = 'pointers/custom-image.png';

为指针定义图标的另一个例子

// Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: "Custom Title",
                    icon: 'pointers/custom-image.png'
                });

在map初始化函数之外定义标记。我已经编辑了你的代码，请看看这个演示链接

相关文章：