我正在尝试在对象数组中给出数据的地图上放置标记。使用Google Maps API文档中的示例代码，我可以放置一个标记，但是一旦到达这些标记，我实际上就不想放置任何东西。我可以使用console.log（）查看标记数据，但是标记不会放置在地图上。
我收到的唯一错误是在Google Maps API之前调用脚本。否则，其他一切似乎都很好（地图已加载）。
所有文件都使用file：//运行。
我可能会错过一些显而易见的东西。我几天前才刚开始学习JavaScript，今天早上才开始学习Maps API。
代码构建地图。
var myLatLng = {lat: 36.602414870756, lng: -105.08904326937};
var mapOptions = {
zoom: 12,
mapTypeId: 'hybrid', //'satellite' with labels
disableDoubleClickZoom: true,
rotateControl: false,
mapTypeControl: false,
fullscreenControl: false,
center: myLatLng
};
var globalMap = new google.maps.Map(document.getElementById('map'), mapOptions);
源数组。
var staffedCamps = [
...,
{
id: 5,
Name: "Black Mountain",
lat: -105.0931424,
long: 36.44229773,
UTM_E: 491633.5115,
UTM_N: 4033044.5622,
Type: "Staff"
},
...,
代码构建标记数组。
var markerData = new Array()
for (let newMark = 0; newMark < staffedCamps.length; newMark++) {
var cMark = staffedCamps[newMark];
markerData.push(new google.maps.Marker({
position: {lat:cMark.lat, lng:cMark.long},
map: globalMap,
title: cMark.Name,
label: cMark.Name
}));
console.log(markerData)
的HTML
<div id="map"></div>
<script defer src="main.js" onload="initMap()"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script defer src="https://maps.googleapis.com/maps/api/js?key=some_api_key&callback=initMap"></script>
我举了一个例子来放置几个标记，我用它new google.maps.Marker来创建许多标记
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(41.38, 2.18);
var myLatlng2 = new google.maps.LatLng(41.37, 2.17);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var array = [{
draggable: true,
position: myLatlng,
map: map,
title: "Your location"
},
{
draggable: true,
position: myLatlng2,
map: map,
title: "Your location"
}
]
markerNow();
function markerNow() {
for (let i = 0; i < array.length; i++) {
var marker = new google.maps.Marker(array[i]);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=AIzaSyCK3ulYYM8GCwK-_HlZVNKvkgp-zvEebUM&"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句