我编写了一个脚本,允许我为谷歌地图上的点添加自己的自定义图标,但是显示的 3 个图标中只有 2 个是我的自定义图标。另一个是默认的红点(这是第一个不正确的标记)。我不明白为什么它显示默认值而不是我的自定义值。
<script type="text/javascript">
var markers = [{
"title": 'Northern NJ',
"lat": '40.248',
"lng": '-73.580',
"description": '<p>test</P>.'
},
{
"title": 'Central NJ',
"lat": '39.763',
"lng": '-73.710',
"description": '<p>test</P>.'
},
{
"title": 'Southern NJ',
"lat": '39.161',
"lng": '-74.098',
"description": '<p>test</P>.'
},
];
window.onload = function() {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 5,
streetViewControl: false,
mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: icon,
title: data.title
});
var icon = {
url: 'https://static.wixstatic.com/media/e09925_8ec9d5e526f94859b5348b41e3daba74~mv2.png'
};
var ctaLayer = new google.maps.KmlLayer({
url: 'https://docs.google.com/uc?id=1razdqFzFB_MWvExuehRUiqhgAeDBXZOI&export=kml',
map: map
});
//Attach click event to the marker.
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:400px;min-height:150px'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
我希望有人能弄清楚为什么只有两个人出现。
最佳答案
您在创建第一个标记后定义图标
。将该定义移到第一个标记之前(或循环外部)并且它可以工作。
代码片段:
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#dvMap {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="dvMap"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<script type="text/javascript">
var markers = [{
"title": 'Northern NJ',
"lat": '40.248',
"lng": '-73.580',
"description": '<p>test</P>.'
},
{
"title": 'Central NJ',
"lat": '39.763',
"lng": '-73.710',
"description": '<p>test</P>.'
},
{
"title": 'Southern NJ',
"lat": '39.161',
"lng": '-74.098',
"description": '<p>test</P>.'
},
];
window.onload = function() {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 5,
streetViewControl: false,
mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();
var icon = {
url: 'https://static.wixstatic.com/media/e09925_8ec9d5e526f94859b5348b41e3daba74~mv2.png'
};
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: icon,
title: data.title
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://docs.google.com/uc?id=1razdqFzFB_MWvExuehRUiqhgAeDBXZOI&export=kml',
map: map
});
//Attach click event to the marker.
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:400px;min-height:150px'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
关于javascript - 谷歌地图中的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56838641/