个人中心
gpt4 book ai didi

javascript - 如何在 javascript、谷歌地图中使用 setPanel() 添加地点搜索框和文本方向

转载 作者：行者123 更新时间：2023-12-03 09:39:26 25 4
gpt4 key购买 nike

我尝试使用 setPanel() 一起添加地点搜索和文本方向。但我做不到。

我想将这些选项添加到一起。

setPanel()和placeSearch一起。

我是 google map API 的新手。谁能帮助我吗？

这是我的代码

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .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>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

//var places;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chennai = new google.maps.LatLng(13.0475604,80.2089535);
  var mapOptions = {
    zoom:7,
    center: chennai
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);

  // 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();
    alert(places);

});
}

function calcRoute() {
  var start = places;
  var end = new google.maps.LatLng(41.850033, -87.6500523);
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

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

    </script>
  </head>
  <body>

  <input id="pac-input" onchange="calcRoute();" class="controls" type="text" placeholder="Search Box">
    <div id="panel"></div>
    <div id="map-canvas"></div>
  </body>
</html>

最佳答案

好的，当您使用 google FormElement 时，您不必在输入元素中调用 calcRoute()。

只要使用下面的代码，它就会工作。

1) Google 表单提交:

    var places = searchBox.getPlaces();
    calcRoute(places[0].geometry.location);

2) calcRoute 函数的第一个参数:

    var start = new google.maps.LatLng(places.A,places.F);

3) 如果你想使用setpanel()方法，只需将此代码放在directionsDisplay.setMap(map);

这会起作用。

    directionsDisplay.setPanel(document.getElementById('panel'));

关于javascript - 如何在 javascript、谷歌地图中使用 setPanel() 添加地点搜索框和文本方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31230023/

25 4 0
文章推荐： javascript - 当用户输入错误的 Angular 时，代码不会显示错误消息
文章推荐： javascript - 更改弹出日历月份语言
文章推荐： javascript - 需要一种解决方法来阻止 Safari 浏览器阻止 Facebook 身份验证弹出框以允许用户登录我的网站
文章推荐： javascript - focus() Jquery 调用无限警报
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com