Question

我使用api在我的网站上加载了谷歌地图。我已经设置了我想要的样子，但我需要将一个带有自定义图像的图钉添加到我地图上的某个位置。中心协调与我想用于引脚的那些不同。我已经尝试使用谷歌api文档中提供的代码，但似乎无法让它工作。下面是我现在使用的代码，没有密码，因为它不起作用。有人能够告诉我要添加什么来使引脚工作的图像文件：

'pin.png'

和坐标：

51.4531807,-2.1864739,17

这是我目前的JS

              // When the window has finished loading create our google map below
        google.maps.event.addDomListener(window, 'load', init);

        function init() {
            var map = new google.maps.Map(mapElement, mapOptions);
            var office = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
  position: office,
  map: map
});
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 17,

                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(51.4476895, -2.2057354), // New York

                draggable: false,
                 zoomControl: false,
                  scrollwheel: false,
                   disableDoubleClickZoom: true,
                   streetViewControl: false,
                   disableDefaultUI: true,

                // How you would like to style the map. 
                // This is where you would paste any style found on Snazzy Maps.
                styles: [   {       featureType:'water',        elementType:'all',      stylers:[           {hue:'#bbbbbb'},            {saturation:-100},          {lightness:-4},         {visibility:'on'}       ]   },{     featureType:'landscape',        elementType:'all',      stylers:[           {hue:'#999999'},            {saturation:-100},          {lightness:-33},            {visibility:'on'}       ]   },{     featureType:'road',     elementType:'all',      stylers:[           {hue:'#999999'},            {saturation:-100},          {lightness:-6},         {visibility:'on'}       ]   },{     featureType:'poi',      elementType:'all',      stylers:[           {hue:'#aaaaaa'},            {saturation:-100},          {lightness:-15},            {visibility:'on'}       ]   },{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
  { visibility: 'off' }
]
 }]
            };



            // Get the HTML DOM element that will contain your map 
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById('map');

            // Create the Google Map using out element and options defined above

        }

Answer 1

在地图上显示图钉的代码是正确的，但这不在可以访问地图的位置。为了纠正这个问题，代码必须放在地图之后和@ Dr.Molle显示的结束括号之前

var mapElement = document.getElementById('map');


          var map = new google.maps.Map(mapElement, mapOptions);
            var hadston = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
  position: hadston,
  map: map,
clickable: false,
  icon: 'pin.png'
  }); 
        }

要显示自定义图钉，我使用带有图像直接链接的图标。

 icon: 'pin.png'

谷歌地图pin api v3

1 个答案: