自动填充搜索框

时间:2016-01-10 06:27:50

标签: javascript html google-maps google-maps-api-3

我有这个代码,显示我当前位置的标记,并将坐标设置为页面标题,立即购买我想为地址添加一个搜索框,但我需要搜索框的文本更改为相应的坐标当标记被拉扯时。而且我不知道那么热

这是我的代码

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

<style>

    #map_canvas{
        height:800px;
        width:800px;
    }   
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?sensor=true">
    </script>
    <script>        
navigator.geolocation.getCurrentPosition(initialize);
      var marker, map;

      function initialize(position ) {
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var mapOptions = {
          zoom: 14,
          center: coords,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById('map_canvas'), 
            mapOptions);

window.document.title= new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var mark = new google.maps.Marker({
            position: coords ,
            map: map,
            draggable:true
        });



        google.maps.event.addListener(mark, 'dragend', function(evt){
       window.document.title = evt.latLng.lat() + ',' + evt.latLng.lng() ;
});     
      }

    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>

1 个答案:

答案 0 :(得分:-1)

Test this,告诉我你对它的看法

我使用document.getElementById()选择了search_box,并更改了其innerHTML

我稍微修改了你的事件监听器

 google.maps.event.addListener(mark, 'dragend', function(evt){
    var coordinates = {lat: evt.latLng.lat(), lng: evt.latLng.lng()};

   window.document.title = coordinates.lat + ',' + coordinates.lng ;
   document.getElementById('search_box').innerHTML = coordinates.lat + ',' + coordinates.lng ;
});     

我在HTML中添加了一个ID为search_box的div。