Javascript 查找所选位置的最近标记Google Maps API？
我需要突出显示我在文本框中输入的位置的所有最近标记。我正在通过我的KML上传标记。但问题是 我可以突出显示该区域，但标记不会突出显示 。请找到我尝试过的代码Javascript 查找所选位置的最近标记Google Maps API？,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我需要突出显示我在文本框中输入的位置的所有最近标记。我正在通过我的KML上传标记。但问题是 我可以突出显示该区域，但标记不会突出显示 。请找到我尝试过的代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>test123</title>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript">
var side_bar_html = "";
var marker_lat;
var marker_lng;
var kml;
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
var circle = null;
var geocoder = new google.maps.Geocoder();
function initialize() {
var center = new google.maps.LatLng(28.019440, -17.382813); //set map center
var mapOptions = {
zoom: 3, //set default zoom level
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP //set default map type(ROADMAP,SATELLITE,HYBRID,TERRAIN)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //***ORIGINAL***
var mcOptions = {gridSize: 50, maxZoom: 15};
var markerclusterer = new MarkerClusterer(map, [], mcOptions);
var infoWindow = new google.maps.InfoWindow({maxWidth: 800});
var myParser = new geoXML3.parser({//*** ORIGINAL: only {map: map});
map: map, singleInfoWindow: true,
createMarker: function(placemark) {
//Constructing marker for each Placemark node, and then add it to the markclustere
var point = placemark.latlng;
// var point = new google.maps.LatLng(placemark.point.lat, placemark.point.lng);
var marker = new google.maps.Marker({position: point});
google.maps.event.addListener(marker, "click", function() {
marker_lat = marker.getPosition().lat();
marker_lng = marker.getPosition().lng();
infoWindow.close();
infoWindow.setOptions({maxWidth: 800});
var content = "<strong>" + placemark.name + "</strong><br>" + placemark.description;
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
markerclusterer.addMarker(marker);
}
});
//kml=myParser.parse('atlanta.kml');
myParser.parse('atlanta.kml');
}
function makeSidebar() {
side_bar_html = "";
for (var i=0; i < gmarkers.length; i++){
if (map.getBounds().contains(gmarkers[i].getPosition())) {
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].title + '<\/a><br>';
}
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
function codeAddress() {
var address = document.getElementById('address').value;
var radius = parseInt(document.getElementById('radius').value, 10)*1000;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
side_bar_html = "";
// map.setCenter(results[0].geometry.location);
var searchCenter = results[0].geometry.location;
alert(kml);
getNearest(kml,marker_lat,marker_lng);
/*
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
*/
if (circle) circle.setMap(null);
circle = new google.maps.Circle({center:searchCenter,
radius: radius,
fillOpacity: 0.35,
fillColor: "#FF0000",
map: map});
var bounds = new google.maps.LatLngBounds();
var foundMarkers = 0;
for (var i=0; i<gmarkers.length;i++) {
if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),searchCenter) < radius) {
bounds.extend(gmarkers[i].getPosition())
gmarkers[i].setMap(map);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].title + '<\/a><br>';
foundMarkers++;
} else {
gmarkers[i].setMap(null);
}
}
// put the assembled side_bar_html contents into the side_bar div
//document.getElementById("side_bar").innerHTML = side_bar_html;
if (foundMarkers > 0) {
map.fitBounds(bounds);
} else {
map.fitBounds(circle.getBounds());
}
// makeSidebar();
google.maps.event.addListenerOnce(map, 'bounds_changed', makeSidebar);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
// map: map,
title: name,
//name: name,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
function getNearest(kml, lat, lng) {
var result = [];
//we can easily skip document/placemark/point
var coords = kml.getElementsByTagName('coordinates');
for (var i=0;i<coords.length;i++) {
var points = coords[i].textContent.split(',');
if ((Math.abs(points[0]-lat)<0.1) && (Math.abs(points[1]-lng)<0.1)) {
result.push(new google.maps.LatLng(points[0], points[1]));
}
}
return result;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<div id="map-canvas" style="height:600px; width:600px"></div>
</td>
<td valign="top" >
<!-- <div id="side_bar" style="width:300px;height:450px; text-decoration: underline; color: #4444ff; overflow:auto;"></div> -->
</td>
</tr>
</table>
<div>
<input id="address" type="textbox" value="Atlanta">
<input type="button" value="Geocode" onclick="codeAddress()"><br>
<input id="radius" type="textbox" value="50"> kilometers
</div>
</body>
</html>
测试123
var side_bar_html=“”；
var标记；
液化天然气；
var-kml；
//数组，用于保存侧栏使用的标记和html的副本
//因为函数闭包技巧在那里不起作用
var gmarkers=[]；
//全局“映射”变量
var-map=null；
var循环=空；
var geocoder=new google.maps.geocoder（）；
函数初始化（）{
var center=new google.maps.LatLng（28.019440，-17.382813）；//设置地图中心
变量映射选项={
缩放：3，//设置默认缩放级别
中心:中心,，
mapTypeId:google.maps.mapTypeId.ROADMAP//设置默认地图类型（路线图、卫星、混合、地形）
};
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；//***原始***
var mcOptions={gridSize:50，maxZoom:15}；
var markerclusterer=新的markerclusterer（map，[]，mcOptions）；
var infoWindow=new google.maps.infoWindow（{maxWidth:800}）；
var myParser=new geoXML3.parser（{//***原始：仅{map:map}）；
map:map，singleInfoWindow:true，
createMarker：函数（placemark）{
//为每个Placemark节点构造标记，然后将其添加到markclustere
var点=placemark.latlng；
//var point=new google.maps.LatLng（placemark.point.lat，placemark.point.lng）；
var marker=new google.maps.marker（{position:point}）；
google.maps.event.addListener（标记“单击”，函数（）{
marker_lat=marker.getPosition（）.lat（）；
marker_lng=marker.getPosition（）.lng（）；
infoWindow.close（）；
setOptions（{maxWidth:800}）；
var content=“”+placemark.name+”
“+placemark.description；
infoWindow.setContent（content）；
信息窗口。打开（地图、标记）；
});
markerclusterer.addMarker（标记器）；
}
});
//kml=myParser.parse（'atlanta.kml'）；
parse（'atlanta.kml'）；
}
函数makeSidebar（）{
侧边_bar_html=“”；
对于（变量i=0；i'；
}
}
//将组装好的side_bar_html内容放入side_bar div
document.getElementById（“side\u bar”）.innerHTML=side\u bar\u html；
}
函数代码地址（）{
var address=document.getElementById（'address'）。值；
var radius=parseInt（document.getElementById（'radius'）。值为10）*1000；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
侧边_bar_html=“”；
//map.setCenter（结果[0].geometry.location）；
var searchCenter=results[0]。geometry.location；
警报（kml）；
最近距离（kml、marker_lat、marker_lng）；
/*
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
*/
if（圆圈）circle.setMap（null）；
圆圈=新的google.maps.circle（{center:searchCenter，
半径：半径，
不透明度：0.35，
fillColor:#FF0000“，
map:map}）；
var bounds=new google.maps.LatLngBounds（）；
var=0；
对于（变量i=0；i 0）{
映射边界（bounds）；
}否则{
map.fitBounds（circle.getBounds（））；
}
//makeSidebar（）；
google.maps.event.addListenerOnce（映射，'bounds_changed'，makeSidebar）；
}否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
});
}
var infowindow=new google.maps.infowindow(
{
尺寸：新谷歌地图尺寸（150,50）
});
//创建标记和设置事件窗口功能的函数
函数createMarker（latlng、name、html）{
var contentString=html；
var marker=new google.maps.marker({
位置：latlng，
//地图：地图，
标题：姓名，
//姓名:姓名,，
zIndex:Math.round（latlng.lat（）*-100000）
我无法用我的眼睛解密你的代码：）我不知道事情发生的确切地点和时间。但是，我将你的KML保存为一个文件KML.KML，以模仿你收到它的方式：
$.ajax({
url: 'kml.kml',
success : function(kml) {
console.log(getNearest(kml, -84.44, 33.65));
}
});
函数getNearest
解析KML，并返回一个google.maps.LatLng
数组，该数组基于lat
和lng
的值，表示最近的点（接近0.1）
function getNearest(kml, lat, lng) {
var result = [];
//we can easily skip document/placemark/point
var coords = kml.getElementsByTagName('coordinates');
for (var i=0;i<coords.length;i++) {
var points = coords[i].textContent.split(',');
if ((Math.abs(points[0]-lat)<0.1) && (Math.abs(points[1]-lng)<0.1)) {
result.push(new google.maps.LatLng(points[0], points[1]));
}
}
return result;
}
功能最接近（kml、lat、lng）{
var结果
function getNearest(kml, lat, lng) {
var result = [];
//we can easily skip document/placemark/point
var coords = kml.getElementsByTagName('coordinates');
for (var i=0;i<coords.length;i++) {
var points = coords[i].textContent.split(',');
if ((Math.abs(points[0]-lat)<0.1) && (Math.abs(points[1]-lng)<0.1)) {
result.push(new google.maps.LatLng(points[0], points[1]));
}
}
return result;
}
unction distance(lat1, lng1, lat2, lng2) {
var radlat1 = Math.PI * lat1 / 180;
var radlat2 = Math.PI * lat2 / 180;
var radlon1 = Math.PI * lng1 / 180;
var radlon2 = Math.PI * lng2 / 180;
var theta = lng1 - lng2;
var radtheta = Math.PI * theta / 180;
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist);
dist = dist * 180 / Math.PI;
dist = dist * 60 * 1.1515;
//Get in in kilometers
dist = dist * 1.609344;
return dist;
}