javascript Google 地图 - 按城市名称插入标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18932560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-27 13:44:10 来源:igfitidea点击:
Google Maps - Insert markers by city name
提问by Balkan Lifestyle
I found this code for Google map, and that suits me.
我找到了谷歌地图的这个代码，这很适合我。
Is it possible that instead of the coordinates include the name of the city?
是否有可能包含城市名称而不是坐标？
I have over 400 markers that I want to display on the map. In some cities have more than one. Therefore I like this code because it prints how many markers in some city.
我有 400 多个标记要显示在地图上。在一些城市有不止一个。因此我喜欢这段代码，因为它打印了某个城市的标记数量。
Or if there is some other code that could help me?
或者是否有其他代码可以帮助我？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script type="text/javascript">
var image = new google.maps.MarkerImage("marker-images/image.png",new google.maps.Size(40,35),new google.maps.Point(0,0),new google.maps.Point(20,35));
var shadow = new google.maps.MarkerImage(
'marker-images/shadow.png',
new google.maps.Size(40,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shape = {
coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
type: 'poly'
};
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// 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;
//marker clusterer
var mc;
var mcOptions = {gridSize: 20, maxZoom: 28};
//global infowindow
var infowindow = new google.maps.InfoWindow();
//geocoder
var geocoder = new google.maps.Geocoder();
var address = new Array(
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"44.820325,20.463989",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"45.263772,19.851211",
"42.092745,19.090607",
"42.092745,19.090607",
"42.092745,19.090607",
"42.092745,19.090607",
"42.092745,19.090607",
"42.092745,19.090607",
"42.092745,19.090607",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"44.775011,17.195556",
"43.85644,18.412372",
"43.85644,18.412372",
"43.85644,18.412372",
"43.85644,18.412372",
"43.85644,18.412372",
"44.81107,18.062682",
"44.81107,18.062682",
"44.81107,18.062682",
"44.81107,18.062682",
"44.81107,18.062682",
"44.81107,18.062682",
"44.81107,18.062682",
"44.81107,18.062682",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.755998,19.212314",
"44.725028,17.323452",
"44.725028,17.323452",
"44.725028,17.323452",
"44.81789,15.879166",
"44.81789,15.879166",
"44.81789,15.879166",
"44.81789,15.879166",
"44.416801,17.082954",
"44.416801,17.082954",
"43.940583,18.078254",
"43.821276,17.608889",
"44.533778,18.531783",
"44.533778,18.531783",
"44.533778,18.531783",
"44.533778,18.531783",
"42.430616,18.700176",
"42.430616,18.700176",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"44.538795,18.673311",
"47.803931,16.232589",
"45.330185,14.442848",
"43.813906,18.569077",
"43.813906,18.569077",
"44.200913,17.915928",
"43.344281,17.812601",
"43.344281,17.812601",
"43.344281,17.812601",
"43.344281,17.812601",
"45.06079,18.468869",
"46.308521,16.338333",
"44.957206,18.302093",
"44.957206,18.302093",
"42.711453,18.343807",
"42.42493,18.771125",
"42.42493,18.771125",
"42.42493,18.771125",
"41.998284,21.428093",
"41.998284,21.428093",
"47.071057,15.437797",
"45.183791,16.805464",
"45.183791,16.805464",
"44.968806,15.94338",
"44.968806,15.94338",
"34.106,-83.589");
var content = new Array("Unit No# 0206",
"Unit No# #2003",
"Unit No# 0176",
"Unit No# #2001",
"Unit No# 0124",
"Unit No# 0157",
"Unit No# #0162",
"Unit No# 0104",
"Unit No# 0118",
"Unit No# #2007",
"Unit No# 0112",
"Unit No# 0139",
"Unit No# 0205",
"Unit No# 0127",
"Unit No# 0187",
"Unit No# 0105",
"Unit No# 0214",
"Unit No# 0186",
"Unit No# 0173",
"Unit No# 0134",
"Unit No# 0128",
"Unit No# 0125",
"Unit No# 0158",
"Unit No# 0193",
"Unit No# 0201");
//min and max limits for multiplier, for random numbers
//keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;
function createMarker(latlng,text) {
var marker = new google.maps.Marker({
draggable: false,
raiseOnDrag: false,
icon: image,
shadow: shadow,
shape: shape,
position: latlng,
map: map
});
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos)) {
text = text + " & " + content[i];
}
}
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
});
mc.addMarker(marker);
return marker;
}
function initialize(){
var options = {
zoom: 6,
center: new google.maps.LatLng(44.276671,18.71727),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
//marker cluster
var gmarkers = [];
mc = new MarkerClusterer(map, [], mcOptions);
for (i=0; i<address.length; i++) {
var ptStr = address[i];
var coords = ptStr.split(",");
var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));
gmarkers.push(createMarker(latlng,content[i]));
}
}
function codeAddress() {
var address = document.getElementById('address').value;
var radius = parseInt(document.getElementById('radius').value, 10) * 1609.34;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
// map: map, <-- uncomment to show red marker
position: results[0].geometry.location
});
if (circle) circle.setMap(null);
circle = new google.maps.Circle({center:marker.getPosition(),
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(),marker.getPosition()) < radius) {
bounds.extend(gmarkers[i].getPosition())
gmarkers[i].setMap(map);
foundMarkers++;
} else {
gmarkers[i].setMap(null);
}
}
if (foundMarkers > 0) {
map.fitBounds(bounds);
} else {
map.fitBounds(circle.getBounds());
}
} else {
alert(status);
}
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function handleKeyPress(e){
var key=e.keyCode || e.which;
if (key==13){
codeAddress();
}
}
function handleResetKeyPress(e){
if (map.getZoom() != 6) map.setZoom(6);
map.setCenter(new google.maps.LatLng(44.276671,18.71727));
document.getElementById("address").value = 'Unesite ime grada ili drzave';
document.getElementById("radius").value = '50';
}
</script>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.auto-style1 {
text-align: center;
}
#footer {
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
/* border: 1px solid blue; */
}
</style>
</head>
<body onload='initialize()'>
<div id="map"></div>
<div id="footer" class="auto-style1" style="left: 0px; bottom: 0; width: 100%">
<input type="text" id="address" value="Unesite ime grada ili drzave" onclick="if(this.value=='Unesite ime grada ili drzave'){this.value=''}" onblur="if(this.value==''){this.value='Unesite ime grada ili drzave'}" onkeypress="handleKeyPress(event);" style="width: 183px">
<input type="button" value="Search" onclick="codeAddress();">
<input type="button" value="Reset" onclick="handleResetKeyPress();">
<input type="text" id="radius" value="50" style="width: 42px" onclick="if(this.value=='50'){this.value=''}" onblur="if(this.value==''){this.value='50'}" onkeypress="handleKeyPress(event);"> miles
</div>
</body>
回答by Ian
If you are wanting the code to work with source data from cities, rather than co-ords (sorry the question isn't very clear, maybe rephrase the question). This is possible with a reverse geocode lookup. There's a jsfiddle here http://jsfiddle.net/sbnXE/The key changed code that can be added in below...
如果您希望代码使用来自城市的源数据，而不是坐标（对不起，这个问题不是很清楚，也许可以重新表述这个问题）。这可以通过反向地理编码查找来实现。这里有一个 jsfiddle http://jsfiddle.net/sbnXE/可以在下面添加的关键更改代码...
Note: multiple geocoding per page display is likely a bad idea and could cause problems as in the code below. I think the best method would probabably be to cache up previous geocoding server side, and then use that data to display placemarks.
注意：每页显示多个地理编码可能是个坏主意，可能会导致问题，如下面的代码所示。我认为最好的方法可能是缓存以前的地理编码服务器端，然后使用该数据来显示地标。
var cities = new Array(
'Dor?ol, Belgrade, Serbia',
'Dor?ol, Belgrade, Serbia',
'Dor?ol, Belgrade, Serbia',
'Rome, Italy',
'Rome, Italy');
var gmarkers = [];
mc = new MarkerClusterer(map, [], mcOptions);
for (i=0; i<cities.length; i++) {
var ptStr = cities[i];
var newAddress;
//Key Part Here!!! These should be cached somewhere rather than querying every page refresh like here though.
geocoder.geocode( { 'address': cities[i] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
newAddress = results[0].geometry.location;
var latlng = new google.maps.LatLng(parseFloat(newAddress.lat()),parseFloat(newAddress.lng()));
gmarkers.push(createMarker(latlng,content[i]));
}
})
} ;
