Question

所以我开始使用谷歌地图api工作，我想检查我如何在某个位置添加标记，我阅读文档并尝试将其应用于我的网站，但我得到许多未定义的错误这是代码

function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 32.0225572, lng: 34.7766291},
zoom: 17,
mapTypeId: 'roadmap',
styles: [
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
]
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };

        function addMarker(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        }

        var feature = [
          {
            position: new google.maps.LatLng(32.0225572, 34.7766291),
            type: 'info'
          }];

          addMarker(feature);

}
</script>
var myLatLng = new google.maps.LatLng(32.0225572, 34.7766291);
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'שטיק-לוגו-07.png'
});

function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icon,
map: map
});
}

var features = [
{
position: new google.maps.LatLng(32.0225572, 34.7766291),
type: 'info'
}
];

for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}

https://jsfiddle.net/932j78og/1/

Answer 1

您的代码中存在多个错误，但我能够修复它，这是最终的解决方案：

$(function() {
   var map = new google.maps.Map($("#map").get(0), {
    center: {lat: 32.0225572, lng: 34.7766291},
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [
    	{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
	{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
	{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
	{featureType: 'administrative.locality',elementType: 'labels.text.fill',stylers: [{color: '#d59563'}]},
        {featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}]},
	{featureType: 'poi.park',elementType: 'geometry',stylers: [{color: '#263c3f'}]},
 	{featureType: 'poi.park',elementType: 'labels.text.fill',stylers: [{color: '#6b9a76'}]},
  	{featureType: 'road',elementType: 'geometry',stylers: [{color: '#38414e'}]},
	{featureType: 'road',elementType: 'geometry.stroke',stylers: [{color: '#212a37'}]},
	{featureType: 'road',elementType: 'labels.text.fill',stylers: [{color: '#9ca5b3'}]},
	{featureType: 'road.highway',elementType: 'geometry',stylers: [{color: '#746855'}]},
	{featureType: 'road.highway',elementType: 'geometry.stroke',stylers: [{color: '#1f2835'}]},
	{featureType: 'road.highway',elementType: 'labels.text.fill',stylers: [{color: '#f3d19c'}]},
	{featureType: 'transit',elementType: 'geometry',stylers: [{color: '#2f3948'}]},
	{featureType: 'transit.station',elementType: 'labels.text.fill',stylers: [{color: '#d59563'}]},
	{featureType: 'water',elementType: 'geometry',stylers: [{color: '#17263c'}]},
	{featureType: 'water',elementType: 'labels.text.fill',stylers: [{color: '#515c6d'}]},
	{featureType: 'water',elementType: 'labels.text.stroke',stylers: [{color: '#17263c'}]}
    ]
  });
  var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
  var icons = {
    info: {
      icon: iconBase + 'info-i_maps.png'
    }
  };
  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      icon: icons[feature.type].icon,
      map: map
    });
  }  
  
  // Array of your features
  var feature = [{
    position: new google.maps.LatLng(32.0225572, 34.7766291),
    type: 'info'
  }];  
  
  // Since it is an array loop through it
  for(var i = 0; i < feature.length; i++) {
    // Add marker for each feature
    addMarker(feature[i]);  
  }
});

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}

#map {
  width: 400px;
  height: 400px;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>

Answer 2

你的小提琴的主要问题（发布的代码有几个问题）是这个javascript错误：

Uncaught TypeError: Cannot read property 'icon' of undefined

feature是一个数组，并且该数组没有“.type”属性。这样称呼它：

addMarker(feature);

不正确。这样称呼它：

addMarker(feature[0]);

作品。

updated fiddle

#map {
  width: 100%;
  height: 300px;
}

<div id="map"></div>
<script>
  function initMap() {
    // Styles a map in night mode.
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 32.0225572,
        lng: 34.7766291
      },
      zoom: 17,
      mapTypeId: 'roadmap',
      styles: styles
    });
    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var icons = {
      info: {
        icon: iconBase + 'info-i_maps.png'
      }
    };

    function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
    }

    var feature = [{
      position: new google.maps.LatLng(32.0225572, 34.7766291),
      type: 'info'
    }];

    addMarker(feature[0]);

  }
  var styles = [{
    elementType: 'geometry',
    stylers: [{
      color: '#242f3e'
    }]
  }, {
    elementType: 'labels.text.stroke',
    stylers: [{
      color: '#242f3e'
    }]
  }, {
    elementType: 'labels.text.fill',
    stylers: [{
      color: '#746855'
    }]
  }, {
    featureType: 'administrative.locality',
    elementType: 'labels.text.fill',
    stylers: [{
      color: '#d59563'
    }]
  }, {
    featureType: 'poi',
    elementType: 'labels.text.fill',
    stylers: [{
      color: '#d59563'
    }]
  }, {
    featureType: 'poi.park',
    elementType: 'geometry',
    stylers: [{
      color: '#263c3f'
    }]
  }, {
    featureType: 'poi.park',
    elementType: 'labels.text.fill',
    stylers: [{
      color: '#6b9a76'
    }]
  }, {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [{
      color: '#38414e'
    }]
  }, {
    featureType: 'road',
    elementType: 'geometry.stroke',
    stylers: [{
      color: '#212a37'
    }]
  }, {
    featureType: 'road',
    elementType: 'labels.text.fill',
    stylers: [{
      color: '#9ca5b3'
    }]
  }, {
    featureType: 'road.highway',
    elementType: 'geometry',
    stylers: [{
      color: '#746855'
    }]
  }, {
    featureType: 'road.highway',
    elementType: 'geometry.stroke',
    stylers: [{
      color: '#1f2835'
    }]
  }, {
    featureType: 'road.highway',
    elementType: 'labels.text.fill',
    stylers: [{
      color: '#f3d19c'
    }]
  }, {
    featureType: 'transit',
    elementType: 'geometry',
    stylers: [{
      color: '#2f3948'
    }]
  }, {
    featureType: 'transit.station',
    elementType: 'labels.text.fill',
    stylers: [{
      color: '#d59563'
    }]
  }, {
    featureType: 'water',
    elementType: 'geometry',
    stylers: [{
      color: '#17263c'
    }]
  }, {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: [{
      color: '#515c6d'
    }]
  }, {
    featureType: 'water',
    elementType: 'labels.text.stroke',
    stylers: [{
      color: '#17263c'
    }]
  }];
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQn2RHysd7yzrxLD9UzeSilYJow1sjobY&callback=initMap"></script>

谷歌地图api在地图上添加标记

2 个答案: