2014-07-14 248 views
0

問題:無論我嘗試使用緯度和經度進行搜索的代碼都不起作用,並且當它工作時,Google地圖標記的功能消失了。什麼是問題以及如何解決它?謝謝你的時間。經緯度搜索谷歌地圖

鏈接:http://web.sfc.keio.ac.jp/~t13537nt/2014s-javascript/finalproj3.html

代碼:

<html> 
<head> 
<title>Final Project</title> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map_canvas { height: 100% } 
</style> 
<script type="text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false"> 
</script> 
<script type="text/javascript"> 

function initialize() 
{ 

var a = parseFloat(document.getElementById("e")); 
var a2 = parseFloat(e.value); 
var b = parseFloat(document.getElementById("f")); 
var b2 = parseFloat(f.value); 
var latlng = new google.maps.LatLng(a2, b2); 

var opt = { 
    zoom: 19, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
{ 
var markers = [ 
{ 
"title": "Apartment 1", 
"lat": 35.388860650649235, 
"lng": 139.46324030821114, 
"description": "Price: ¥33.000, Distance from station: Shonandai Station(10min), Area: 17.39m², " 
}, 
{ 
"title": "Apartment 2", 
"lat": 35.388860650649235, 
"lng": 139.46324030821114, 
"description": "Price: ¥33.000, Distance from station: Shonandai Station (10min), Area: 17.39m², Link:http://minimini.jp/index.php?action=detail&corpgrpcd=0001&premisescd=1400056239&roomcd=9&from=list&mode=area_map" 
}, 
{ 
"title": "Apartment 3", 
"lat": 35.39248252044338, 
"lng": 139.47223949406157, 
"description": "Price: ¥35.000, Distance from station: Shonandai Station (10min), Area: 19.44m², Link:http://minimini.jp/index.php?action=detail&corpgrpcd=0001&premisescd=1410553172&roomcd=0016&from=list&mode=area_map" 
}, 
{ 
"title": "Apartment 4", 
"lat": 35.39067361424714, 
"lng": 139.46653295127902, 
"description": "Price: ¥38.000, Distance from station: Shonandai Station (7min), Area: 19.4m², Link:http://minimini.jp/index.php?action=detail&corpgrpcd=0001&premisescd=1410570463&roomcd=0005&from=list&mode=area_map" 
}, 
{ 
"title": "Apartment 5", 
"lat": 35.39041780203234, 
"lng": 139.46999217577283, 
"description": "Price: ¥38.000, Distance from station: Shonandai Station (10min), Area: 17.01m², Link:http://minimini.jp/index.php?action=detail&corpgrpcd=0001&premisescd=1400196243&roomcd=1&from=list&mode=area_map" 
}, 
{ 
"title": "Apartment 6", 
"lat": 35.398528563920124, 
"lng": 139.47167646242022, 
"description": "Price: ¥39.000, Distance from station: Shonandai Station (5min), Area: 16.52m², Link:http://minimini.jp/index.php?action=detail&corpgrpcd=0001&premisescd=1400061125&roomcd=2&from=list&mode=area_map" 
}, 
{ 
"title": "Apartment 7", 
"lat": 35.39739150713436, 
"lng": 139.47291271210852, 
"description": "Price: ¥40.000, Distance from station: Shonandai Station (8min), Area: 17.39m², Link:http://minimini.jp/index.php?action=detail&corpgrpcd=0001&premisescd=1400060051&roomcd=0007&from=list&mode=area_map" 
}, 
{ 
"title": "Apartment 8", 
"lat": 35.39334628357817, 
"lng": 139.4639682412082, 
"description": "Price: ¥43.000, Distance from station: Shonandai Station (5min), Area: 19.44m², Link:http://minimini.jp/index.php?action=detail&corpgrpcd=0001&premisescd=1400178657&roomcd=4&from=list&mode=area_map" 
}, 
{ 
"title": "Apartment 9", 
"lat": 35.394961209578796, 
"lng": 139.46389577286448, 
"description": "Price: ¥43.000, Distance from station: Shonandai Station (3min), Area: 16.2m², Link:http://minimini.jp/index.php?action=detail&corpgrpcd=0001&premisescd=1400280638&roomcd=5&from=list&mode=area_map" 
}, 
{ 
"title": "Apartment 10", 
"lat": 35.3916500792011, 
"lng": 139.464780951818, 
"description": "Price: ¥43.500, Distance from station: Shonandai Station (6min), Area: 17.62m², Link:http://minimini.jp/index.php?action=detail&corpgrpcd=0001&premisescd=1400320165&roomcd=0004&from=list&mode=area_map" 
}, 
{ 
"title": "Shonandai Station", 
"lat": 35.396440, 
"lng": 139.466409, 
"description": "The place you want to live near to, trust me, I am your senpai -_-" 
},]; 
var mapOptions = { 
center: new google.maps.LatLng(35.396440, 139.466409), 
zoom: 15, 
mapTypeId: google.maps.MapTypeId.ROADMAP 

}; 
var infoWindow = new google.maps.InfoWindow(); 
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
for (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, 
title: data.title 
}); 
(function(marker, data) { 

google.maps.event.addListener(marker, "click", function(e) { 
infoWindow.setContent(data.description); 
infoWindow.open(map, marker); 
}); 
})(marker, data); 
} 
} 
} 
</script> 
</head> 
<body onLoad="initialize()"> 
<form id="form1" runat="server"> 
<table> 
<tr> 
<td>Enter Latitude:</td> 
<td><input type="text" id="e" value="13.053147716796578" /> </td> 
</tr> 
<tr> 
<td>Enter Longitude:</td> 
<td><input type="text" id="f" value="80.2501953125" /> </td> 
</tr> 
<tr> 
<td></td> 
<td><input type="button" value="Submit" onClick="javascript:initialize()" /> </td> 
</tr> 
</table> 
<div id="map_canvas" style="width: 500px; height: 400px"></div> 
</form> 
</body> 
</html> 

回答

0

要搜索使用經緯度,使用功能

map.setCenter(latlng); 

在問候你的代碼,拆分的JavaScript分成兩個獨立的功能。一個初始化地圖,一個根據輸入重新居中。然後,對於按鈕的onclick,只需調用讀取輸入和重新居中的函數即可。

Working jsfiddle:http://jsfiddle.net/Drweb/

相關問題