Question

问题：无论我尝试使用纬度和经度进行搜索的代码都不起作用，当它运行时，谷歌地图标签的功能就消失了。

链接：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>

Answer 1

要使用latlng进行搜索，请使用

功能

map.setCenter(latlng);

关于您的代码，将javascript分成两个单独的函数。一个用于初始化地图，另一个用于根据输入重新定位。然后，对于按钮的onclick，只需调用读取输入和重新居中的功能。

工作jsfiddle：http://jsfiddle.net/Drweb/

经度和纬度搜索谷歌地图

1 个答案: