①在高德地图开发平台注册一个账号，获取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. jquery动态修改div高度

    <!DOCTYPE html> <html> <head> <script src="jquery-1.4.2.min.js">&l ...

  2. ORA-01109:数据库未打开(解决)

    SQL> startup mountORA-01081: 无法启动已在运行的 ORACLE - 请首先关闭它SQL> shutdown immediateORA-01109: 数据库未打开 ...

  3. poj 4014 Dice 贪心

    //poj 4014 //sep9 #include <iostream> #include <algorithm> using namespace std; int n; s ...

  4. oracle 建表时显示ORA-00984: 列在此处不允许

      oracle 建表时显示ORA-00984: 列在此处不允许 CreationTime--2018年7月19日16点10分 Author:Marydon 1.情景展示 使用plsql建表时,报错 ...

  5. SettingsTortoiseSVN

      迁移时间:2017年5月20日11:16:05CreateTime--2016年9月18日18:20:15Author:Marydon在windows下安装SVN软件 说明:64位的系统只能安装6 ...

  6. python之函数用法all

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法all #all(iterable) #说明:如果iterable的所有元素不为0.' ...

  7. sql优化经历（转存+记录）

    sql优化经历 补充:看到这么多朋友对sql优化感兴趣,我又重新补充了下文章的内容,将更多关于sql优化的知识分享出来, 喜欢这篇文章的朋友给个赞吧,哈哈,欢迎交流,共同进步. 2015-4-30补充 ...

  8. 网站Web性能测试:ApacheBench,Webbench,http_load使用教程

    网站Web性能测试:ApacheBench,Webbench,http_load使用教程 Web服务器 欲思 10个月前 (05-25) 0评论   一个网站或者博客到底能够承受多大的用户访问量经常是 ...

  9. HttpClient中的Timout

    connection timeout和SoTimeout A connection timeout occurs only upon starting the TCP connection. This ...

  10. 走进 Realm 的世界

    来源:XcodeMen(郭杰) 链接:http://www.jianshu.com/p/0e248f000405 本文由我们团队的郭杰童鞋分享. Realm是什么 Realm是由Y Combinato ...