[英]Make a marker in google maps
我想问一下如何在我的Google Map HTML中制作一个双标记。 谁能给我一个建议? 之前谢谢您。当我单击“查找”按钮时,它在地图上没有显示任何内容
这是我的HTML代码
<html>
<head>
<title>PETA</title>
<style>
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#map
{
height: 100%;
}
</style>
</head>
<body>
<div id="panel">
<input id="address1" type="textbox" value="Bogor" />
<input id="address2" type="textbox" value="Bandung" />
<input type="button" value="find!" onclick="codeAddress()" />
</div>
<div id="map"></div>
<script>
var marker1 = null;
var marker2 = null;
var gc = new google.maps.Geocoder();
function initialize()
{
var latlng = new google.maps.LatLng(-7.275920, 112.791871);
var mapOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
function codeAddress() {
initialize();
var address1 = document.getElementById('address1').value;
var address2 = document.getElementById('address2').value;
gc.geocode({
'address': address1
}, function (res1, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert(address1);
gc.geocode({
'address': address2
}, function (res2, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (marker1 && marker1.setMap) marker1.setMap(null);
marker1 = new google.maps.Marker({
position: res1[0].geometry.location,
map: map
});
if (marker2 && marker2.setMap) marker2.setMap(null);
marker2 = new google.maps.Marker({
position: res2[0].geometry.location,
map: map
});
} else alert("Geocode failed of " + address2 + ", status=" + status);
});
} else alert("Geocode failed of " + address1 + ", status=" + status);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&signed_in=true&libraries=geometry&callback=initialize">
</script>
</body>
</html>
我收到一个错误:
断言失败:InvalidValueError:setMap:不是Map的实例; 而不是StreetViewPanorama的实例
表示var map
出了点问题。
只需将map
变量设置为global。
var marker1 = null;
var marker2 = null;
var gc = new google.maps.Geocoder();
var map;
在initialize()
内部进行更改:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
至
map = new google.maps.Map(document.getElementById("map"), mapOptions);
同样,从function codeAddress()
删除initialize()
调用,您不需要它。
工作提琴: https : //jsfiddle.net/Lh6w6kvr/
这是完整的HTML(如您所见,我已将脚本移至<head>
并删除了callback=initialize
):
<html>
<head>
<title>PETA</title>
<style>
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#map
{
height: 100%;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&signed_in=true&libraries=geometry">
</script>
<script>
var marker1 = null;
var marker2 = null;
var map;
function initialize()
{
var latlng = new google.maps.LatLng(-7.275920, 112.791871);
var mapOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
function codeAddress() {
// initialize();
var gc = new google.maps.Geocoder();
var address1 = document.getElementById('address1').value;
var address2 = document.getElementById('address2').value;
gc.geocode({
'address': address1
}, function (res1, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert(address1);
gc.geocode({
'address': address2
}, function (res2, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (marker1 && marker1.setMap) marker1.setMap(null);
marker1 = new google.maps.Marker({
position: res1[0].geometry.location,
map: map
});
if (marker2 && marker2.setMap) marker2.setMap(null);
marker2 = new google.maps.Marker({
position: res2[0].geometry.location,
map: map
});
} else alert("Geocode failed of " + address2 + ", status=" + status);
});
} else alert("Geocode failed of " + address1 + ", status=" + status);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address1" type="textbox" value="Bogor" />
<input id="address2" type="textbox" value="Bandung" />
<input type="button" value="find!" onclick="codeAddress()" />
</div>
<div id="map"></div>
</body>
</html>
经过最新的FF,IE和Chrome测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.