将搜索框添加到自定义地图 javascript

Posted

技术标签:

【中文标题】将搜索框添加到自定义地图 javascript【英文标题】：Add searchbox to a custom map javascript 【发布时间】：2015-01-05 22:03:27 【问题描述】：

我是谷歌地图和地理位置的新手，我正在尝试向此地图添加一个搜索框，该地图上已经有一个带有用户当前位置的标记。我尝试了很多不同的方法，但是当单击加载地图的按钮时，什么也没有发生。任何人都可以帮忙吗？谢谢！

<!DOCTYPE html>
 <html>
  <head>
    <title>Simple Map</title>

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

    <style>
       html, body, #mapholder 
        height: 100%;
        margin: 0px;
        padding: 0px;
       

       .controls 
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
       

      #pac-input 
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Times;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
       

      #pac-input:focus 
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      

      .pac-container 
        font-family: Times;
      

      #type-selector 
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
       

       #type-selector label 
       font-family: Times;
       font-size: 13px;
       font-weight: 300;
      
    </style>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script>

     var ref_latitude = "";
        var ref_longitude = "";
        var boundary_latitude = "";
        var boundary_longitude = "";



function initialize() 

  var markers = [];
  var map = new google.maps.Map(document.getElementById('mapholder’), 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  );

  var defaultBounds = new google.maps.LatLngBounds(
       new google.maps.LatLng(36.983, -122.0031),
       new google.maps.LatLng(36.9, -122.003));
 map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
   var input = /** @type HTMLInputElement */(
       document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type HTMLInputElement */(input));

  google.maps.event.addListener(searchBox, 'places_changed', function() 
    var places = searchBox.getPlaces();

    if (places.length == 0) 
      return;
    
     for (var i = 0, marker; marker = markers[i]; i++) 
      marker.setMap(null);
    


    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) 
      var image = 
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      ;


      var marker = new google.maps.Marker(
        map: map,
        icon: image,
        title: place.name,
         position: place.geometry.location
      );

      markers.push(marker);

      bounds.extend(place.geometry.location);
    

    map.fitBounds(bounds);
  );
  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() 
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
   );
 


var x = document.getElementById("demo");
function getLocation() 
    if (navigator.geolocation) 
        navigator.geolocation.getCurrentPosition(showPosition, showError);
     else  
        x.innerHTML = "Geolocation is not supported by this browser.";
    
 

 function showPosition(position) 
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('mapholder')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';

    var myOptions = 
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:style:google.maps.NavigationControlStyle.SMALL
    

    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker(position:latlon,map:map,title:"You are here!");


function showError(error) 
    switch(error.code) 
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
         case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
<style>
  #target 
        width: 345px;
      
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">    
<button onclick="getLocation()">Find me!</button>

<div id="mapholder"></div>



  </body>
</html>

【问题讨论】：

【参考方案1】：

您的代码中有错字（javascript 控制台显示：Uncaught SyntaxError: Unexpected token ILLEGAL），' 没有关闭 'mapholder' 的字符串（它不匹配单引号）。

function initialize() 

  var markers = [];
  var map = new google.maps.Map(document.getElementById('mapholder’), 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  );

应该是：

function initialize() 

  var markers = [];
  var map = new google.maps.Map(document.getElementById('mapholder'), 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  );

工作代码sn-p：

var ref_latitude = "";
var ref_longitude = "";
var boundary_latitude = "";
var boundary_longitude = "";

function initialize() 

  var markers = [];
  var map = new google.maps.Map(document.getElementById('mapholder'), 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  );

  var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(36.983, -122.0031),
    new google.maps.LatLng(36.9, -122.003));
  map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
  var input = /** @type HTMLInputElement */
    (
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type HTMLInputElement */
    (input));

  google.maps.event.addListener(searchBox, 'places_changed', function() 
    var places = searchBox.getPlaces();

    if (places.length == 0) 
      return;
    
    for (var i = 0, marker; marker = markers[i]; i++) 
      marker.setMap(null);
    


    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) 
      var image = 
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      ;


      var marker = new google.maps.Marker(
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      );

      markers.push(marker);

      bounds.extend(place.geometry.location);
    

    map.fitBounds(bounds);
  );
  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() 
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  );

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#mapholder 
  height: 100%;
  margin: 0px;
  padding: 0px;

.controls 
  margin-top: 16px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

#pac-input 
  background-color: #fff;
  padding: 0 11px 0 13px;
  width: 400px;
  font-family: Times;
  font-size: 15px;
  font-weight: 300;
  text-overflow: ellipsis;

#pac-input:focus 
  border-color: #4d90fe;
  margin-left: -1px;
  padding-left: 14px;
  /* Regular padding-left + 1. */
  width: 401px;

.pac-container 
  font-family: Times;

#type-selector 
  color: #fff;
  background-color: #4d90fe;
  padding: 5px 11px 0px 11px;

#type-selector label 
  font-family: Times;
  font-size: 13px;
  font-weight: 300;


<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="mapholder" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<input id="pac-input" />

【讨论】：

当地图显示用户当前位置时，搜索框消失。知道如何解决这个问题吗？ developers.google.com/maps/documentation/javascript/…

以上是关于将搜索框添加到自定义地图 javascript的主要内容，如果未能解决你的问题，请参考以下文章

如何将 Google 地图搜索框添加到我的自定义地图？

将来自 url 的图像添加到自定义 InfoWindow google maps v2

如何将 flyto 传单功能添加到自定义 Svg 地图

IOS：将图像添加到自定义 MKAnnotationview

将嵌套对象作为道具映射到自定义组件

将调度障碍 (GCD) 添加到自定义队列但不添加到全局并发队列