Google Maps API下拉列表，放大到标记 [英] Google Maps API dropdown list, zoom to marker
本文介绍了Google Maps API下拉列表，放大到标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是Google Maps API v3，我有一个带有几个标记的简单地图。我也有一个下拉列表。我需要最少量的代码才能完成这项工作。我想在下拉列表中选择一个标记，并将标记选中。我已经尝试了一切，以及在网上看，我发现事情接近，但迄今没有任何工作，到目前为止非常沮丧。请帮助！这里是代码片段：
I am using Google Maps API v3, I have a simple map with a few markers. I also have a pull down list. I need the least amount of code to make this work. I would like to select a marker in the pull down list and have the marker selected pan to it. I have tried everything as well as look online and I find things close, but nothing is working so far, very frustrated so far. Pls Help! here is the snippet:
我需要弄清楚如何完成这项工作
I need to figure out how to make this work
<!DOCTYPE html> <!-- saved from url=(0014)about:internet -->
<html>
<head>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<br>
<script>
var geocoder;
var directionsService;
var directionsDisplay;
//Start of code (above is framework)
function initialize() {
var myLatLng = new google.maps.LatLng(41.682, -100.103);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
//Map Framework above
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //Map Options
//google.maps.event.addDomListener(document.getElementById('SelectList'),
// 'change', function() {}
//var mypos = document.getElementById('SelectList').value;
// Marker2 (Red - default marker color)
var latLng2 = new google.maps.LatLng(43.239316, -96.259241);
var contentString2 = '<div id="content">'+
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
var marker2 = new google.maps.Marker({
position: latLng2,
icon: src='http://maps.google.com/mapfiles/kml/paddle/red-circle.png',
//new google.maps.Size(42,68)
//size: (12, 10),
//position: mypos,
map: map,
title: "marker ...)" //hover
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map, marker2);
});
//moved 'SelectList' up toward top!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// End code for Marker 2
// Start of Marker3 (Yellow - marker color)
var latLng3 = new google.maps.LatLng(44.021778, -96.052417);
var contentString3 = '<div id="content">'+
var infowindow3 = new google.maps.InfoWindow({
content: contentString3
});
var marker3 = new google.maps.Marker({
position: latLng3,
icon: src='http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png',
map: map,
title: "Marker ..."
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map, marker3);
});
// End for Marker 3
// Start of Marker4 (Green - marker color)
var latLng4 = new google.maps.LatLng(43.881690, -95.922869);
var contentString4 = '<div id="content">'+
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
var marker4 = new google.maps.Marker({
position: latLng4,
icon: src='http://maps.google.com/mapfiles/kml/paddle/grn-circle.png',
map: map,
title: "marker ..."
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map, marker4);
});
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map, marker4);
});
// End code for Marker 3
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:95%"></div>
<br>
<div style="position: absolute; right: 25px; top: 15px; padding: 10px 10px 10px 10px;">
<h3><u>Marker List by area</u></h3>
</div>
<br>
<div style="position: absolute; right: 25px; top: 165px; padding: 10px 10px 10px 10px;">
<form>
<fieldset>
<legend><b>Region 1</b></legend>
<p>
<label><b>Marker List</b></label>
<select id = "myList3">
<option value = "9">Marker 1</option>
<option value = "10">Marker 2</option>
<option value = "11">Marker 3</option>
<option value = "12">Marker 4</option>
</select>
</p>
</fieldset>
</form></div>
</body>
</html>
推荐答案
下拉更改。钩住你的下拉，像这样︰onchange =dropdownChanged（）
You need to store the markers elsewhere and identifiy them when the dropdown changes. Hook your dropdown like this: onchange="dropdownChanged()"
你的代码应该是这样的：
Your code should look like this:
<script >
var geocoder;
var directionsService;
var directionsDisplay;
var markers = [];
var map;
//Start of code (above is framework)
function initialize() {
var myLatLng = new google.maps.LatLng(41.682, -100.103);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
//Map Framework above
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //Map Options
//google.maps.event.addDomListener(document.getElementById('SelectList'),
// 'change', function() {}
//var mypos = document.getElementById('SelectList').value;
// Marker2 (Red - default marker color)
var latLng2 = new google.maps.LatLng(43.239316, -96.259241);
var contentString2 = '<div id="content">';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
var marker2 = new google.maps.Marker({
position: latLng2,
icon: src = 'http://maps.google.com/mapfiles/kml/paddle/red-circle.png',
//new google.maps.Size(42,68)
//size: (12, 10),
//position: mypos,
map: map,
title: "marker ...)" //hover
});
markers[10] = marker2;
google.maps.event.addListener(marker2, 'click', function () {
infowindow2.open(map, marker2);
});
//moved 'SelectList' up toward top!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// End code for Marker 2
// Start of Marker3 (Yellow - marker color)
var latLng3 = new google.maps.LatLng(44.021778, -96.052417);
var contentString3 = '<div id="content">';
var infowindow3 = new google.maps.InfoWindow({
content: contentString3
});
var marker3 = new google.maps.Marker({
position: latLng3,
icon: src = 'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png',
map: map,
title: "Marker ..."
});
markers[11] = marker3;
google.maps.event.addListener(marker3, 'click', function () {
infowindow3.open(map, marker3);
});
// End for Marker 3
// Start of Marker4 (Green - marker color)
var latLng4 = new google.maps.LatLng(43.881690, -95.922869);
var contentString4 = '<div id="content">';
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
var marker4 = new google.maps.Marker({
position: latLng4,
icon: src = 'http://maps.google.com/mapfiles/kml/paddle/grn-circle.png',
map: map,
title: "marker ..."
});
markers[12] = marker4;
google.maps.event.addListener(marker4, 'click', function () {
infowindow4.open(map, marker4);
});
var infowindow4 = new google.maps.InfoWindow({
content: contentString4
});
google.maps.event.addListener(marker4, 'click', function () {
infowindow4.open(map, marker4);
});
// End code for Marker 3
}
function dropdownChanged()
{
var index = document.getElementById("myList3").value;
var marker = markers[index];
var position = marker.getPosition();
map.setCenter(position);
}
</script>
编辑2 **
这里是你如何钩选select到dropdownChanged
EDIT 2 ** Here is how you hook the select to dropdownChanged
<select id = "myList3" onchange="dropdownChanged();">
<option value = "9">Marker 1</option>
<option value = "10">Marker 2</option>
<option value = "11">Marker 3</option>
<option value = "12">Marker 4</option>
</select>
编辑1 *
根据您的评论，if你想从下拉菜单中更新位置，你可以直接从下拉菜单中调用一个函数。panTo（x，y）
EDIT 1 * As per your comment below, if you want to update the position from the dropdown you can simply call a function directly from the dropdown panTo(x,y)
<script>
function panTo(x,y)
{
var position = new google.maps.LatLng(x,y);
map.setCenter(position);
}
</script>
这篇关于Google Maps API下拉列表，放大到标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
