高德地图Amap搜索定位

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

在前一篇的基础上加入了搜索提示,和通过搜索定位

前文:

https://blog.csdn.net/Zdelta/article/details/87072653

加入搜索:

1,引入js

//引入高德地图API,多个插件用逗号分隔
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=开发者key&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>

<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

2,js:



//搜索
var autoOptions = {
    input: "partyPlace"//前端搜索框
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
    map: map
}); 
AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发
function select(e) {
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);  //关键字查询查询
}

3,效果:

搜索提示:

点击下拉框中的一项时,定位过去:

 

 

内网走nginx代理访问高德webapi2.0 需求:客户的电脑都只能访问内,服务器可以访问外网,客户电脑使用的项目中用到了高德webapi2.0。10.200.31.45:32100是我们的web服务器。 网上基本上都是对高德webapi1.4的配置方式,而web2.0有一些差别。 1.前端修改高德地图js应用 如果是index.html引入, 修改之前的应用: <script type="text/javascript"... 阅读详情

相关推荐

vue-amap 实现高德地图定位 + 搜索 +回显

html: <template> <div class="amap-page-container"> <!-- 搜索条件 是个对象searchOption 属性是city城市名,citylimit:false; 搜索回调函数 --> <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result.

Tkings233的博客 9686

微信小程序使用高德地图amap)实现检索定位附近周边的POI功能示例

先给大家看一下效果图展示: 1、登录高德地图开发者平台https://lbs.amap.com/,申请接口Key 2、在高德开发平台下载微信小程序SDK,https://lbs.amap.com/api/wx/download 解压下载的文件得到 amap-wx.js ,在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下...

美奇软件开发工作室 1万+

React使用高德地图 (react-amap)(一)

pc版React重构,使用到了高德地图。搜了资料,发现有一个针对React进行封装的地图插件react-amap。官方网址:https://elemefe.github.io/react-amap/components/map,有兴趣的可以看下里面的API。 react-amap 安装 1、使用npm进行安装,目前是1.2.8版本: cnpm i react-amap 2、直接使用sdn方式引入...

u013262823的博客 1万+

Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例

本课程是一个理论和实战相结合的课程。通过本课程的学习,大家可以系统的学习高德地图各个接口如何在自己的项目中使用。以及如何进行扩展学习。并且通过一个综合的实战案例来巩固知识点以及积累项目经验。主要内容如下:如何到高德地图开发者平台注册账号以及申请权限如何在自己的项目中引入高德地图的接口对接常见的接口:定位得到详细地址信息在地图上添加点标记添加信息窗体路线的查询接口周边搜索接口通过仿美团/饿了吗案例开发移动APP来巩固高德地图接口的应用

nuxt.js 项目的使用

运行图 安装 npx create-nuxt-app project 配置 koa + axios typescript-vuex github ui框架 element-ui 目录结构 assets —资源目录 layouts —布局目录 middleware —中间件目录 plugins —插件目录 static —静态(后台) 在您的 vue 模板中, 如果你需要引入 a...

维克多噗噗的博客 3709

高德地图API使用

高德地图二次开发提供了很多接口,功能强大。 首先需要申请一个KEY教程如下:链接 通过这个key替换 <script src="https://webapi.amap.com/maps?v=1.4.15&key=自己的KEY&plugin=AMap.Autocomplete"></script> 其中plugin=AMa...

三体问题 4037

react Amap引入高德地图,并实现搜索定位

react Amap引入高德地图,并实现搜索定位 一、react 引入AmapAmap官方地址:https://elemefe.github.io/react-amap/articles/start 按照官方操作说明,安装相应的npm即可,这里不做重复赘述。 二、实现效果: 注意:代码里面涵盖了一些自己的代码逻辑...

洪伟富专栏 6263

vue使用vue-amap插件(高德地图插件实现定位搜索、marker标记点)

实现简单功能记录一下,有问题的话麻烦指出谢谢! 需求:进入地图定位当前位置,并标记,点击位置显示标记点,上一个标记点消失,搜索框输入地址,显示位置并标记。 1.在高德开发者平台申请key; 2.安装vue-amap; npm install vue-amap --save 3.在项目main.js中引入vue-amap import VueAMap from 'vue-amap'; //引入高德 VueAMap.initAMapApiLoader({ key: '写入申请的key', //插

ccyolo的博客 1万+

vue2集成amap高德地图)位置搜索定位

我只用到地址的搜索和获取当前地址,没有加上地图,要做其他效果完全可以参考官方文档。 有几个注意事项是,我是2017-6-15开发的,目前的vue-amapapi太简陋了,而且定制化很恼火,所以建议集成vue-amap后,再结合官方文档。 随便值得高兴的是,终于摆脱了百度地图恶心的api,不需要头部直接引用百度地图那个js了,因为我整个项目就只有一个页面要用到地图功能,全局引入太恶心了。 ...

michaelzhouh的专栏 2万+

vue中引入高德地图实现定位功能

上次在实现一个需求时,需要在web端实现定位功能。即实现在web搜索定位的功能。首先看一下效果如下: 功能也相对不是很难,就是需要调用调用地图插件来完成页面地图的加载与显示,本来是打算选取某度的地图,偶然发现高德地图的api也很详细,所以来尝试一下。闲话少说,看具体实现。 1.首先申请一个高德地图的开发平台秘钥 这个秘钥在我们调用高德地图的api中需要使用到,所以必须要申请一个。申请方式搜索高...

qq_33479841的博客 1万+

高德地图引入 vue初始化高德地图报错‘AMap‘ is not defined

<template> <div class="web-main"> <div id="container" style="width:1000px; height:900px"></div> </div> </template> <script> import { getActionData } from "@/api/manage.js"; export default { name: "MidMap.

weixin_50885665的博客 3395

vue2高德地图实现定位、点击地图获取当前位置信息、搜索

web高德地图定位、点击获取位置信息、搜索

qq_44724181的博客 8811

Vue 引入高德地图 vue-amap

高德开发者平台—链接地址1、控制台——我的应用——创建应用——添加key 创建应用 新建应用 选择web端(JS平台) last:到这里的 key 就有了,还得到了一个安全密钥;1、安装 2、在 main.js 里引入其中更多的插件,请参考: 插件的使用-入门-教程-地图 JS API | 高德地图API (amap.com) 3、HTML部分:编写容器 4、Script 部分:引入 AMapManager 5、Style部分(自己根据实际场景调试) 最后的效果图: 文章

Sunshine_Jian的博客 5522

amap vueamap 与_vue 使用高德地图vue-amap组件过程解析

这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下首先npm install -S vue-amap然后在 main.jsimport VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖Vue.use(VueAMap);// 初始...

weixin_33520952的博客 778

react中使用高德地图进行定位

需求: 1)点击【搜索地图】后,会根据填写的内容进行搜索,地图定位中显示搜索结果并跳转到对应区域 2)地图定位中可任意点选位置,并将该位置的经纬度保存到该门店中 结果: 只实现了第一条的需求 完成条件 环境: 使用react.js Ant.design的框架 步骤: 1)注册成为高德地图的开发者,申请key 2)在项目中安装 react-amap 3)导包 import { Map, Ma...

weixin_43745987的博客 7011

基于vue 2.0的H5页面中使用H5自带的定位高德地图定位搜索周边商户,覆盖物标记,定位到当前城市

基于vue 2.0的H5页面中使用高德地图定位搜索周边商户,覆盖物标记。

weixin_45781661的博客 2957

flutter 高德地图api使用 app内集成定位 地图搜索功能

flutter 高德地图api使用 app内集成定位 地图搜索功能 amap_all_fluttify插件(现在不知道咋的没有了) 这个插件就是集成了amap_map_fluttify amap_search_fluttify amap_location_fluttify三个插件 分别在pubspec里导入就行 main.dart里先注册 获取andriod和ios的相关key ///地图基本功能-注册高德key await AmapService.init(androidKey: 'xxxxxxx

youtiankeng的博客 2087

如何在前端展现高德地图定位搜索框,等功能)

高德地图

qq_56036033的博客 3474
上一篇: MySQL自动备份和下载备份到指定位置
下一篇: layui表单提交前数据检验
Zdelta
博客等级 码龄10年 22粉丝 61原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值