Javascript 谷歌地图API获取位置、地点标记和搜索选项卡_Javascript_Google Maps_Google Maps Api 3

Javascript 谷歌地图API获取位置、地点标记和搜索选项卡

javascript google-maps google-maps-api-3

Javascript 谷歌地图API获取位置、地点标记和搜索选项卡,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我已经阅读了所有关于GoogleMapsAPI的帖子，我已经创建了两个html和js文件，它们可以很好地工作，但当我将它们组合在一起时就不行了第一个具有自动完成功能的文本框，用于搜索和聚焦某些位置： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset

我已经阅读了所有关于GoogleMapsAPI的帖子，我已经创建了两个html和js文件，它们可以很好地工作，但当我将它们组合在一起时就不行了

第一个具有自动完成功能的文本框，用于搜索和聚焦某些位置：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        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: Roboto;
        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: Roboto;
      }

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

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
}

    </style>
    <title>Places search box</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initialize() {

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

  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));
  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));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  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);
    }

    // For each place, get the icon, place name, and location.
    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)
      };

      // Create a marker for each place.
      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);

    </script>
    <style>
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map-canvas"></div>
  </body>
</html>


html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
.控制{
边缘顶部：16px；
边框：1px实心透明；
边界半径：2px 0 0 2px；
框大小：边框框；
-moz框大小：边框框；
高度：32px；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
}
#pac输入{
背景色：#fff；
填充：0 11px 0 13px；
宽度：400px；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
文本溢出：省略号；
}
#pac输入：焦点{
边框颜色：#4d90fe；
左边距：-1px；
左填充：14px；/*常规左填充+1*/
宽度：401px；
}
.pac集装箱{
字体系列：Roboto；
}
#类型选择器{
颜色：#fff；
背景色：#4d90fe；
填充：5px11px 0px 11px；
}
#类型选择器标签{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}
}
位置搜索框
//本例使用Google Place Autocomplete将搜索框添加到地图中
//特色。人们可以进入地理搜索。搜索框将返回一个
//包含位置和预测搜索词组合的拾取列表。
函数初始化（）{
var标记=[]；
var map=new google.maps.map（document.getElementById（'map-canvas'）{
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var defaultBounds=new google.maps.LatLngBounds(
新的google.maps.LatLng（-33.8902151.1759），
新的google.maps.LatLng（-33.8474151.2631））；
map.fitBounds（defaultBounds）；
//创建搜索框并将其链接到UI元素。
变量输入=/**@type{HTMLInputElement}*/(
document.getElementById（'pac-input'）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
var searchBox=new google.maps.places.searchBox(
/**@type{HTMLInputElement}*/（输入））；
//[开始区域\u getplaces]
//侦听当用户从中选择项目时激发的事件
//选择列表。检索该项目的匹配位置。
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
for（var i=0，marker；marker=markers[i]；i++）{
marker.setMap（空）；
}
//对于每个位置，获取图标、地名和位置。
标记=[]；
var bounds=new google.maps.LatLngBounds（）；
for（var i=0，place；place=places[i]；i++）{
变量图像={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
//为每个地方创建一个标记。
var marker=new google.maps.marker({
地图：地图，
图标：图像，
标题：place.name，
位置：place.geometry.location
});
标记器。推（标记器）；
扩展（place.geometry.location）；
}
映射边界（bounds）；
});
//[结束区域\u getplaces]
//将搜索框结果偏向在搜索范围内的位置
//当前地图的视口。
google.maps.event.addListener（映射'bounds_changed'，函数（）{
var bounds=map.getBounds（）；
searchBox.setBounds（边界）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
#目标{
宽度：345px；
}

第二个选项允许用户在地图中单击鼠标右键设置标记并获取确切位置：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #map_canvas {height:600px;width:800px}
    </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

    <script type="text/javascript">
        var map;
        var markersArray = [];

        function initMap()
        {
            var latlng = new google.maps.LatLng(40.97, -5.6635);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


            // add a click event handler to the map object
            google.maps.event.addListener(map, "rightclick", function(event)
            {
                // place a marker
                placeMarker(event.latLng);

                // display the lat/lng in your form's lat/lng fields
                document.getElementById("latFld").value = event.latLng.lat();
                document.getElementById("lngFld").value = event.latLng.lng();
            });
        }
        function placeMarker(location) {
            // first remove all markers if there are any
            deleteOverlays();

            var marker = new google.maps.Marker({
                position: location, 
                map: map
            });

            // add marker in markers array
            markersArray.push(marker);

            map.setCenter(location);
        }

        // Deletes all markers in the array by removing references to them
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            markersArray.length = 0;
            }
        }
    </script>
</head>

<body onload="initMap()">
    <div id="map_canvas"></div>
    <input type="text" id="latFld">
    <input type="text" id="lngFld">
</body>
</html>


#地图画布{高度：600px；宽度：800px}
var映射；
var-markersArray=[]；
函数initMap（）
{
var latlng=新的google.maps.latlng（40.97，-5.6635）；
变量myOptions={
缩放：10，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
//将单击事件处理程序添加到映射对象
google.maps.event.addListener（映射，“右键单击”，函数（事件）
{
//放置标记
地点标记（事件标记）；
//在表单的lat/lng字段中显示lat/lng
document.getElementById（“latFld”）.value=event.latLng.lat（）；
document.getElementById（“lngFld”）.value=event.latLng.lng（）；
});
}
功能位置标记（位置）{
//首先删除所有标记（如果有）
deleteOverlays（）；
var marker=new google.maps.marker({
位置:位置,，
地图：地图
});
//在标记数组中添加标记
markersArray.push（marker）；
地图设置中心（位置）；
}
//通过删除对数组中所有标记的引用来删除这些标记
函数deleteOverlays（）{
if（markersArray）{
for（markersArray中的i）{
markersArray[i].setMap（空）；
}
markersArray.length=0；
}
}

我想将两者结合起来，但问题是当我尝试时，rightbuttom和markers选项不起作用

下面是我结合这两种方法创建的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        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: Roboto;
        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: Roboto;
      }

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

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
}

    </style>
    <title>Places search box</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initialize() {


function placeMarker(location) {
            // first remove all markers if there are any
            deleteOverlays();

            var marker = new google.maps.Marker({
                position: location, 
                map: map
            });

            // add marker in markers array
            markersArray.push(marker);

            map.setCenter(location);
        }

        // Deletes all markers in the array by removing references to them
function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            markersArray.length = 0;
            }
        }

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

  // add a click event handler to the map object
            google.maps.event.addListener(map, "rightclick", function(event)
            {
                // place a marker
                placeMarker(event.latLng);

                // display the lat/lng in your form's lat/lng fields
                document.getElementById("latFld").value = event.latLng.lat();
                document.getElementById("lngFld").value = event.latLng.lng();
            });







  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));
  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));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  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);
    }

    // For each place, get the icon, place name, and location.
    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)
      };

      // Create a marker for each place.
      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);

    </script>
    <style>
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map-canvas"></div>
  </body>
</html>


html，正文，#地图画布{
身高：100%；
边际：0px；
var map;
var markersArray = [];