引用第三方高德地图接口---使用js脚本进行开发地图定位的步骤
①在高德地图开发平台注册一个账号，获取key
②添加新的key
③引入map插件
④复制过来map的脚本代码和编写搜索框
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=你申请的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<body>
<input type="text" id="tipinput" style="margin-left:380px;width:300px;height:40px;padding-left:10px;font-weitht:900px;"/> //搜索框
<div id="container" style="width:1000px;height:600px;"></div> //地图显示区域
</body>
<script type="text/javascript">
//地图加载
var map = new AMap.Map("container", {
resizeEnable: true
});
//输入提示
var autoOptions = {
input: "tipinput"
};
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); //关键字查询查询
}
</script>
转载于:https://www.cnblogs.com/fengjunming/p/8086847.html
引用第三方高德地图接口---使用js脚本进行开发地图定位的步骤相关推荐
- 视频教程-Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例-JavaScript
Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例 互联网编程行业10年开发和授课经验 曾任太极集团,外资企业等一线互联网python高级开发工程师 现任聚焦计算机技术有限公司项目组担任架构 ...
- 109.【Java最全腾讯地图接口】
腾讯地图接口API (一).腾讯地图接口 1.搭建环境 (1).导入相关依赖 (2).获取腾讯地图接口Key 2.根据经纬度获取地址 (逆地址解析) 3.封装的万能工具类
- 高德地图和百度地图接口封装遇到的问题（二）：绘制带有方向箭头的折线
临时接到一个小任务,要封装一个绘制带有方向箭头的折线的功能接口,就下面这种样式: 百度地图给的示例是这样的: var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BA ...
- vue传中文标点_vue项目引入第三方高德地图实现标点定位
vue项目中,高德地图使用. 引入vue中.异步导入vue中. gaoDe(key) { window.onApiLoaded = function () { var map = new AMap.M ...
- react-native调起第三方高德地图导航URL解释
react-native调起第三方高德地图导航URL解释 做react-native地图应用时,主要使用的是高德地图,所以在导航上也准备调起高德地图应用来完成导航功能,在高德地图API官网并没有发现高 ...
- Vue引用原生高德地图标注
Vue引用原生高德地图标注 一.引用高德? 首先在vue项目中的pubic下的index.html的head中引用. 二.在你的模板中设置一个div你的地图容器 <template>< ...
- Python脚本调用腾讯地图接口
Python脚本调用腾讯地图接口 腾讯地图提供的有公开的webServerAPI,BAT在很多领域三分天下,地图领域也是如此.腾讯地图在几年以前还是烂的掉渣,自从腾讯的很多生态合作伙伴使用了之后,现状 ...
- Flutter对接第三方高德地图+百度地图基础定位实现
Flutter对接第三方高德地图+百度地图基础定位实现 原创:@As.Kai 博客地址:https://blog.csdn.net/qq_42362997 如果以下内容对您有帮助,点赞点赞点赞~ 高德 ...
- Vue 中引用第三方js总结
vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库 基础示例 1.把下载好的 ...
最新文章
- 如何自动将AI Studio中的GIF文件上载到CSDN？
- jquery 的ajax请求示例和注意事项
- 计算机组成原理知识查漏补缺
- c语言 链表 删除节点,C语言实现单链表节点的删除（不带头结点）
- jpetstore开发实战--（1）
- ubuntu下类似IP Scan扫描同一局域网的IP
- javascript征途笔记
- 如何面对科技性失业？
- [Storage]RPM series linux rescan disk / RPM系Linux重新扫描硬盘
- 名帖291 董其昌 行书《乐志论》
- mysql 字符串的hash函数_经典字符串Hash函数介绍 - yanjun_1982的专栏 - CSDNBlog
- LINUX命令大全详解备忘录
- 可以像微信钱包一样？2020年数字钱包技术重要的进化方向（上）
- 抖音快手短视频平台营销技巧
- android wifi流量监控,Android流量监测的实现原理
- cisco单交换机实现基于端口的VLAN设计----计算机网络课设（含.pkt文件）
- 问题解决：虚拟机centos7无法正常启动：XFS (vda3): Corruption of in-memory data detected. Shutting doum filesystem
- java从github下载项目_在github下载的java项目通过idea打开(全流程图文，傻瓜式)
- 6款工具助力分析JVM问题
- 「津津乐道播客」#250. 津津有味：一只鸡蛋的冒险之旅