①在高德地图开发平台注册一个账号，获取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>

引用第三方高德地图接口---使用js脚本进行开发地图定位的步骤的更多相关文章

  1. kettle 6.1 通过JS脚本与SwitchCase结合实现目标步骤选择

    场景: 判断抽取的数据在目标库中是否已经存在(同一个病人是否已经存在治疗方案号): 1.若不存在,则GROUPROWNO=1,并Insert into 目标库   ( 判断外关联字段是否为空 ) 2. ...

  2. 关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项

    步骤: 1.用cc.find()方法找到相应的骨骼动画节点,并把这个对象赋值给一个var出来的新对象. 具体代码:var spineboy_anim = cc.find("UI_Root/a ...

  3. Node.js 从零开发 web server博客项目[接口]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  4. Node.js 从零开发 web server博客项目[express重构博客项目]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  5. Node.js 从零开发 web server博客项目[数据存储]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  6. Node.js 从零开发 web server博客项目[koa2重构博客项目]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  7. Node.js 从零开发 web server博客项目[安全]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  8. Node.js 从零开发 web server博客项目[日志]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  9. Node.js 从零开发 web server博客项目[登录]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

随机推荐

  1. 解决 在POM配置Maven plugin提示错误“Plugin execution not covered by lifecycle configuration”

    eclipse在其POM文件的一处提示出错如下: Plugin execution not covered by lifecycle configuration: org.apache.maven.p ...

  2. [Python]网络爬虫（九）：百度贴吧的网络爬虫（v0.4）源码及解析

    转自:http://blog.csdn.net/pleasecallmewhy/article/details/8934726 百度贴吧的爬虫制作和糗百的爬虫制作原理基本相同,都是通过查看源码扣出关键 ...

  3. Linux 指令详解 alias 设置别名（转）

    我们在使用Linux中使用较长的命令而且要经常要使用时,总是会使用别名,这里就简单的介绍一下别名alias 指令:alias设置指令的别名 语法:#  alias name='command line ...

  4. win7硬盘安装方法

    Windows 7 完全硬盘安装方法 干干净净的C盘 事先准备:装好系统的电脑一台,win 7安装iso. 注: (1).Windows 7要求安装在NTFS分区,但是其他分区可以是FAT32格式! ...

  5. 微信小程序之分享，动态添加分享数据

    1.效果: 2..js代码: page({ /** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: function (res) { var that = this; r ...

  6. 【转载】@RequestMapping的分类

    @RequestMapping的分类 类级别的和方法级别的@RequestMapping的几种形式: @RequestMapping(method = RequestMethod.GET)  @Req ...

  7. OpenStack+Ceph存储空间回收《转》

    转自:http://blog.csdn.net/wytdahu/article/details/48288681 问题描述 在OpenStack云环境的部署中,存储通常具备Thin provision ...

  8. PLSQL_统计信息系列06_统计信息的历史和日志

    20150506 Created By BaoXinjian

  9. CFS调度器

    一.前言 随着内核版本的演进,其源代码的膨胀速度也在递增,这让Linux的学习曲线变得越来越陡峭了.这对初识内核的同学而言当然不是什么好事情,满腔热情很容易被当头浇灭.我有一个循序渐进的方法,那就是先 ...

  10. Linux递归解压缩一个目录下的全部文件

    gunzip -r hongchangfirst/data 怎样递归删除那些剩余的非log结尾的文件? 先列出确认一下: find hongchangfirst/data -type f ! -nam ...