我有一张地图上有许多标记。由于它的设置方式,一个标记将始终与地图的中心重合。我想在该标记上向所有其他标记显示不同的图标。
使用此功能定义标记及其相应的信息框:
function createMarker(latlng, html, summary, photo1, photo2, thisLatlng) {
var contentString = "<div style='min-height:150px'>" + photo1 + "<img src='/images/" + photo2 + "' width='225' height='150' align='left' style='margin-right:8px;border:none'></a><span class='title'>" + html +"</span><br>" + summary + "</div>";
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: thisicon,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'mouseover', function() {
ib.close(map, marker);
boxText.innerHTML = contentString;
ib.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
ib.close(map, marker);
});
gmarkers.push(marker);
}
&#34;经纬度&#34;是每个标记不同的纬度/经度。 &#34; thisLatlng&#34;是地图的中心和一个特定标记的纬度/经度。
我的意图是使用这样的东西来确定要使用的正确图标:
if(latlng===thisLatlng){
var thisicon = icon1;
}else{
var thisicon = icon2;
}
然而,它并没有作为&#34; if&#34;总是返回false。我试过了
if(latlng===thisLatlng){
和
if(latlng==thisLatlng){
并且我也尝试过使用!=和!==反过来但它们总是返回false。 我通过将它们一个打印在另一个之上来检查这两个值是否相等,它们看起来完全一样(应该是这样)。
我一定是做错了什么,但是什么?
答案 0 :(得分:1)
LatLng
class有一个等于方法。
等于
<小时/> 参数:的
等于(其他)
其他:LatLng
返回值:布尔值
比较功能。
另一种选择是计算两点之间的差异并为“等于”设置一个阈值(比如1米)
也就是说,您现有的代码(===
适用于我):fiddle和.equals
一样(fiddle)
代码段
var map;
var gmarkers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 19.12170,
lng: 72.85083
},
zoom: 13.5,
mapTypeId: 'terrain'
});
createMarker(map.getCenter(), "center", "summary", "", "", map.getCenter());
var otherPt = new google.maps.LatLng(19.12, 72.851);
createMarker(otherPt, "not center", "summary2", "", "", map.getCenter());
}
function createMarker(latlng, html, summary, photo1, photo2, thisLatlng) {
var contentString = "<div style='min-height:150px'>" + photo1 + "<img src='/images/" + photo2 + "' width='225' height='150' align='left' style='margin-right:8px;border:none'></a><span class='title'>" + html + "</span><br>" + summary + "</div>";
if (latlng.equals(thisLatlng)) {
var thisicon = "http://maps.google.com/mapfiles/ms/micons/blue.png";
} else {
var thisicon = "http://maps.google.com/mapfiles/ms/micons/green.png";
}
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: thisicon,
});
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>