javascript - 在地点自动完成上移动谷歌地图标记-6ren

javascript - 在地点自动完成上移动谷歌地图标记

转载作者：塔克拉玛干更新时间：2023-11-02 21:54:42

我目前有一张 map ，在用户的地理位置上显示一个标记。我有一个文本输入字段设置为地点自动完成。当用户搜索城市名称时，会在该位置放置一个新标记。但是，旧的地理定位标记仍然存在。我想删除旧标记或移动它，以便 map 上只有 1 个标记。我该怎么做？

这是我的代码:

<html>
<head>
    <script>
    var map;

    function initialize() {
        var mapOptions = {
            zoom: 12
     };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    // Get GEOLOCATION
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

        map.setCenter(pos);
        var marker = new google.maps.Marker({
            position: pos,
            map: map,
            draggable:true
        });
      }, function() {
        handleNoGeolocation(true);
      });
    } else {
      // Browser doesn't support Geolocation
      handleNoGeolocation(false);
    }
    function handleNoGeolocation(errorFlag) {
      if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
      } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
      }

      var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
      };

      map.setCenter(options.position);

    }

// get places auto-complete when user type in location-text-box
    var input = /** @type {HTMLInputElement} */(
  document.getElementById('location-text-box'));


   var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29),
      draggable:true
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      infowindow.close();
      marker.setVisible(false);
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        return;
      }

 // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
       map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setIcon(/** @type {google.maps.Icon} */({
      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(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
        address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

  });



}

google.maps.event.addDomListener(window, 'load', initialize);
        </script>
  </head>
  <body>
        <div>
              <input type="text" id="location-text-box">
              <div id="map-canvas"></div>
        </div>
  </body>
  </html>

最佳答案

将你的标记设置为全局标记，然后将其隐藏或移动到新位置

工作代码片段:

var map;
var marker;

function initialize() {
  var mapOptions = {
    zoom: 12
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // Get GEOLOCATION
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
        position.coords.longitude);

      map.setCenter(pos);
      marker = new google.maps.Marker({
        position: pos,
        map: map,
        draggable: true
      });
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
      var content = 'Error: The Geolocation service failed.';
    } else {
      var content = 'Error: Your browser doesn\'t support geolocation.';
    }

    var options = {
      map: map,
      position: new google.maps.LatLng(60, 105),
      content: content
    };

    map.setCenter(options.position);
    marker = new google.maps.Marker({
      position: options.position,
      map: map,
      draggable: true
    });

  }

  // get places auto-complete when user type in location-text-box
  var input = /** @type {HTMLInputElement} */
    (
      document.getElementById('location-text-box'));


  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29),
    draggable: true
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17); // Why 17? Because it looks good.
    }
    marker.setIcon( /** @type {google.maps.Icon} */ ({
      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(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

  });



}

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

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div style="height:100%; width:100%">
  <input type="text" id="location-text-box" />
  <div id="map-canvas"></div>
</div>

关于javascript - 在地点自动完成上移动谷歌地图标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28398250/

文章推荐： iOS 5.0 didSelectAnnotationView

文章推荐： android - 如何为 Android 单选按钮使用 setTextColor？

文章推荐： java - 日志方法之间的区别

php 如果条件在官方有分配？地点
$query = "SELECT Name, CountryCode FROM City ORDER BY Name"; if ($result = $mysqli->query($query)) {
GWT - 如何将网站的层次结构映射到事件/地点/窗口？
我是 GWT 的新手，我的英语不太好，请见谅。我需要使用 GWT 创建一个网站。该网站具有层次结构:主要的全局标题和几个按钮。每个按钮都会打开应用程序的新部分，该部分有自己的子选项卡。每个子选项卡都
python - 获取一个国家的天气，地点 bs4
我正在尝试使用此网站 https://www.timeanddate.com/weather/通过打开如下 URL 使用 BeautifulSoup4 抓取天气数据: quote_page=r"htt
jquery - 异步加载 Google 地点
由于我要在移动应用中使用谷歌地图和地点，因此我不希望任何东西减慢应用加载速度。我发现在边缘网络上，我的应用程序启动速度非常慢。我所有的js都是本地的，所以只有谷歌地图和地点需要很长时间才能加载(如果
Facebook - 通过位置名称获取位置/地点 ID
我可以通过带有位置 ID 的图形 API 发送查询来返回位置的详细信息，但是我希望实现相反的结果 - 通过发送包含位置名称(城市，州等)。这可能吗？最佳答案这在几种不同的方法下是可能的。您可以使用
javascript - Google 地点，类型区域的严格限制
我正在尝试返回仅限于某种区域的自动完成结果 - the (regions) type collection instructs the Places service to return any res
c# - 我应该使用什么事件(地点)来改变多语言网站的文化和日历？
我有一个多语言网站... 我在 visual studio 中为语言(en + 我的语言)制作了两个文件夹，并为每个文件夹制作了我的网站! 对于一种语言的网站，我有一门类(class)可以根据我的文化
ios - Foursquare 地点/搜索和半径参数
我使用 this向FS请求获取 field 但有些场馆与要求的位置之间的距离超过 500 米。换句话说，ll 和 radius 参数没有像我预期的那样工作。因为我希望拥有所请求区域的所有 field
python - 查找文本中的所有位置/城市/地点
如果我有一段文本，例如包含一篇加泰罗尼亚语报纸文章，我如何从该文本中找到所有城市？我一直在查看 python 的 nltk 包，我已经下载了加泰罗尼亚语的语料库 (nltk.corpus.cess_
r - 有没有一种方法/站点/地点/心态可以让您在包的帮助中查看示例代码的结果
R 的帮助系统很棒，我喜欢几乎所有函数的帮助页面都包含一个示例，但有时我希望有一种方法可以查看示例代码的结果，而无需复制并粘贴到我当前的 session 中。这对于图形功能来说是双重的。有没有办法执
iphone - SDK 是否提供了对注释进行分组的方法，例如照片(地点)
我想实现类似的效果，其中引脚被分组在一起，然后当您接近点时用动画分开。当您选择带有地理标记应用的地点时，会在“照片”应用中看到此效果最佳答案似乎没有，但有一个第三方库提供了此功能: http://
ssrs-2008 - SSRS 动态设置工作台位置/地点
我在报表生成器/设计模式中看到，有一个“位置”和“位置”属性，可让您设置表格应显示在距顶部或左侧的距离。我的问题是，有没有办法在同一位置设置 2 个或更多表格(即页面顶部，从顶部开始 0，从左边开始
java - 在 Spring 中确定不支持的媒体类型最理想的时间/地点？
所以，我有一个 Spring MVC 应用程序，我想要一种方法来确定资源何时不支持特定媒体类型。我正在考虑使用自定义 View 解析器来执行此操作...如果没有一个 View 解析器找到 View 名
ios - 将地点的网站和价格水平添加到我的自定义类别(Google 地点、Swift)
有了这个类 import UIKit import CoreLocation private let geometryKey = "geometry" private let locationKey
mysql - 适合组织/地点/部门/用户的最佳数据库结构？
我正在构建一个系统，其中应该有一个包含组织、位置、部门和用户的数据库。它们按照您的预期连接起来: 每个组织可以包含一个或多个地点每个地点(建筑物)可以包含一个或多个部门每个部门工作一名或多名用户
android - Google 地点 API(地点搜索器)
我一直在旧项目上使用 Google place API，但在那些项目中我必须选择一个地方，然后 API 返回给我相关信息地方... 问题是使用相同的 API 我可以请求一个地方，例如 Restaura
javascript - Google 地点 place.open_now
这里我有一个脚本，它通过 google places api 显示对象的开放时间。 http://jsbin.com/ATaZEXE/4 现在我想将 .label 类的背景颜色更改为“红色”，如果 p
algorithm - 在给定纬度和经度的情况下找到最近的标记 map 地标/地点
我正在开发一款 Google map 应用，目标用户可能需要关于特定位置的路线，这些位置只能通过应用中的经纬度获知。问题是方向需要解析为人类可读的名称，最好是任何位置都可以相对于另一个附近的位置进行
ios - 多个问题(日期、天气、地点)
我正在开发一款应用程序，我相信它会对学生有所帮助。我想根据位置包括天气(仅温度)。例如，如果我要从一个城市前往另一个城市，我希望它能针对新城市自动更新。我该怎么做？对于我的第二个问题，我还想将日期(即
Nginx。如果为空 URI。如果是空域。地点。正则表达式
我正在使用上游模块来平衡我的网站。出于某种原因，我必须将一些请求重定向到指定的服务器。简而言之:我想将 domain.com 重定向到指定的服务器，domain.com/anything 可以由上游模

塔克拉玛干

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在地点自动完成上移动谷歌地图标记