如何添加自定义地图指针?

时间:2014-08-05 10:03:39

标签: javascript google-maps pointers maps

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

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

1 个答案:

答案 0 :(得分:0)

只需在行中设置自定义图像的相对地址:

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'

                });

你在地图初始化功能之外定位标记。我已编辑了您的代码,请查看此演示link