【问题标题】:Google Map set location?谷歌地图设置位置?
【发布时间】:2012-10-16 06:43:15
【问题描述】:

我有这段代码,它显示了在“LatLng”坐标中指定的当前位置。但我想要的是有一个输入框,比如说 2 个输入框“位置从”和“位置到”。我希望从 2 个框中显示给定输入值的当前位置,如图所示。

这在 Google Map V3 中可行吗?

我想让 mapOptions 值成为框中输入的值。 该怎么做?

这是我的代码。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBQ8OCC8En5vNHod25Ov3Qs5E1v7NPRSsg&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {
                    // add mapOptions here to the values in the input boxes.
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 100.644),
          zoom: 2,
          mapTypeId: google.maps.MapTypeId.ROADMAP  
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body>

    From: <input type="text" name="From"><br>
    To: <input type="text" name="To"><br>

    <button type="button" onclick="initialize()">View example (map-simple.html)</button>

    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

谢谢

杰森

【问题讨论】:

  • 是的,有可能,除了找到教程代码之外,请展示您尝试过的内容

标签: javascript google-maps-api-3


【解决方案1】:

你应该使用geocoder

geocoder = new google.maps.Geocoder();      
var address = document.getElementById('address').value; //input box value
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,
        position: results[0].geometry.location
    });
}
});  

Map Fiddle

【讨论】:

  • 是的,为此您应该创建函数并将地址传递给该函数参数
  • 是的,但我需要为我的实施做更多的事情......但再次感谢。
【解决方案2】:

你可以查看这个地址上的例子:https://developers.google.com/maps/documentation/javascript/demogallery

在这里您可以找到您问题的答案以及您可能需要进一步了解的更高级技术。

你好!

【讨论】:

    【解决方案3】:

    也许是这样的:

    boxLat.value = map.getCenter().getLat() ;
    boxLng.value = map.getCenter().getLng() ;
    

    【讨论】:

    • 我认为应该反过来...... map.getCenter.getlat() = boxLat.value;另一个也一样
    猜你喜欢
    • 2013-01-09
    • 2014-02-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-16
    • 2016-03-07
    • 1970-01-01
    相关资源
    最近更新 更多