加载地图和标记后更改选择框上的谷歌地图位置

关注

发信

关注(28)粉丝(399)

加载地图和标记后更改选择框上的谷歌地图位置

本文介绍了加载地图和标记后更改选择框上的谷歌地图位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何更改谷歌地图位置，以便在选择框更改时另一个纬度和经度坐标位于谷歌地图的中心.地图和标记已成功加载.唯一要更改的是，假设从选择框中选择已加载的地图时将其滚动到正确的城市.标记的坐标不应更改.

<option value="1" selected>NYC</option><option value="2">芝加哥</option><option value="3">波士顿</option></选择><div class="map-container"><div id="map"></div><!--谷歌地图已经加载-->

解决方案

如果您有下拉城市位置的坐标，请使用它们.如果没有，您可以使用地理编码器(如果您提供它识别的名称):

代码片段:

function initialize() {var map = new google.maps.Map(document.getElementById("map"));var geocoder = new google.maps.Geocoder();$("#dropdown").change(function() {地址 = $("#dropdown :selected")[0].text;geocodeAddress(地址，地理编码器，地图)；});var address = $("#dropdown :selected")[0].text;geocodeAddress(地址，地理编码器，地图)；}google.maps.event.addDomListener(窗口，加载"，初始化)；功能 geocodeAddress(地址，地理编码器，resultsMap){document.getElementById('info').innerHTML = address;geocoder.geocode({地址":地址}，功能(结果，状态){如果(状态 === google.maps.GeocoderStatus.OK){resultsMap.fitBounds(results[0].geometry.viewport);document.getElementById('info').innerHTML += "
"+ 结果[0].geometry.location.toUrlValue(6);} 别的 {alert('地理编码失败，原因如下:' + status);}});}

html,身体，#地图，.map-容器{高度:100%；宽度:100%；边距:0px；填充:0px}

<script src="https://maps.googleapis.com/maps/api/js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="下拉列表"><option value="1" selected>纽约市</option><option value="2">芝加哥</option><option value="3">波士顿</option><option value="4">帕洛阿尔托</option><option value="5">西雅图</option></选择><div id="信息"></div><div class="map-container"><div id="地图"></div><!--谷歌地图已经加载-->

How to change the Google map location so that another lat and long coordinates are in the center of the google map on selectbox change. The map and markers were already loaded successfully. The only thing to change is to let's say scroll the already loaded map to the proper city when it is chosen from the selectbox. The coordinates of markers should NOT be changed.

<select>
  <option value="1" selected>NYC</option>
  <option value="2">Chicago</option>
  <option value="3">Boston</option>
</select>

<div class="map-container">
    <div id="map"></div><!--the google map is loaded already-->
</div>

解决方案

If you have the coordinates of the locations of the dropdown city, use them. If not, you can use the geocoder (if you provide names it recognizes):

code snippet:

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"));
  var geocoder = new google.maps.Geocoder();
  $("#dropdown").change(function() {
    address = $("#dropdown :selected")[0].text;
    geocodeAddress(address, geocoder, map);
  });
  var address = $("#dropdown :selected")[0].text;
  geocodeAddress(address, geocoder, map);
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(address, geocoder, resultsMap) {
  document.getElementById('info').innerHTML = address;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.fitBounds(results[0].geometry.viewport);
      document.getElementById('info').innerHTML += "<br>" + results[0].geometry.location.toUrlValue(6);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

html,
body,
#map,
.map-container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="1" selected>New York City</option>
  <option value="2">Chicago</option>
  <option value="3">Boston</option>
  <option value="4">Palo Alto</option>
  <option value="5">Seattle</option>
</select>
<div id="info"></div>
<div class="map-container">
  <div id="map"></div>
  <!--the google map is loaded already-->
</div>

这篇关于加载地图和标记后更改选择框上的谷歌地图位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-26 04:35