2016-09-22 146 views
-1

所以我開始工作與谷歌地圖API一點,我想檢查如何添加標記在某個位置,我閱讀文檔,並試圖將其應用於我的網站,但我得到許多不確定的錯誤 這是代碼谷歌地圖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/

+0

你可以提供一個plunker? – MarcoS

+0

@MarcoS將它添加到了 – ssabin

+0

我收到了發佈代碼的javascript錯誤。 – geocodezip

回答

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: [ 
 
    \t {elementType: 'geometry', stylers: [{color: '#242f3e'}]}, 
 
\t {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, 
 
\t {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, 
 
\t {featureType: 'administrative.locality',elementType: 'labels.text.fill',stylers: [{color: '#d59563'}]}, 
 
     {featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}]}, 
 
\t {featureType: 'poi.park',elementType: 'geometry',stylers: [{color: '#263c3f'}]}, 
 
    \t {featureType: 'poi.park',elementType: 'labels.text.fill',stylers: [{color: '#6b9a76'}]}, 
 
    \t {featureType: 'road',elementType: 'geometry',stylers: [{color: '#38414e'}]}, 
 
\t {featureType: 'road',elementType: 'geometry.stroke',stylers: [{color: '#212a37'}]}, 
 
\t {featureType: 'road',elementType: 'labels.text.fill',stylers: [{color: '#9ca5b3'}]}, 
 
\t {featureType: 'road.highway',elementType: 'geometry',stylers: [{color: '#746855'}]}, 
 
\t {featureType: 'road.highway',elementType: 'geometry.stroke',stylers: [{color: '#1f2835'}]}, 
 
\t {featureType: 'road.highway',elementType: 'labels.text.fill',stylers: [{color: '#f3d19c'}]}, 
 
\t {featureType: 'transit',elementType: 'geometry',stylers: [{color: '#2f3948'}]}, 
 
\t {featureType: 'transit.station',elementType: 'labels.text.fill',stylers: [{color: '#d59563'}]}, 
 
\t {featureType: 'water',elementType: 'geometry',stylers: [{color: '#17263c'}]}, 
 
\t {featureType: 'water',elementType: 'labels.text.fill',stylers: [{color: '#515c6d'}]}, 
 
\t {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>

+0

這很棒,它的效果非常好 – ssabin

+0

歡迎您。樂意效勞。 – xxxmatko

0

與提琴(張貼的代碼中有幾個問題)的主要問題是這個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>