在Google地圖上做一個標記
[英]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>
1 個解決方案
解決方案1
1 已采納 2015-10-20 10:45:35
我收到一個錯誤：
斷言失敗：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.