①在高德地图开发平台注册一个账号,获取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. ios8.1.3Cydia重装

    1.下载deb包 2.把包放到/var/mobile/Media/下 3.终端输入:dpkg -i /var/mobile/Media/*.deb 然后输入:su -c uicache mobile ...

  2. Circular dependency issuse on cocoapods version(0.36.0) 全然解决方式(非降版本号)

    此前的文章中.以前提到在cocoapods依赖管理版本号假设超过0.34.4.比方0.35, 0.36.0等版本号中. 运行"pod install" 或者 "pod u ...

  3. std::copy 和 std::back_inserter

    #define print_vector(v1) \ for(auto iter = v1.begin();iter != v1.end();iter++) \ cout<<*iter&l ...

  4. JQuery 导入导出 Excel

    正在做一个小项目, 从数据库中查询数据放在 HTML Table 中. 现在想要从这个 table 中导出数据来. 另外用户需要选择导出的列. 使用 jQuery 的导出插件可以完成这个需求. jQu ...

  5. 一、springMVC、freemarker页面半自动静态化

    说明:刚刚接到公司的通知,实现(半自动化),即通过参数控制是否需要静态化页面(哪里我说错了,勿喷!谢谢) 1,请求.do的URL时直接生成对应的.htm文件,并将请求转发到该htm文件 2,自由控制某 ...

  6. 【js】正则表达式(II)

    JavaScript中提供了一个名为RegExp的对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp对象实例. 在JavaScript中,有两种方式可以创建RegExp对象 ...

  7. pycurl 学习笔记--getinfo 函数

    通过 pycurl.Curl 对象的 getinfo 函数,可以获取到响应的如下信息: (参考: http://curl.haxx.se/libcurl/c/curl_easy_getinfo.htm ...

  8. Calendar 中getActualMaximumd 功能

    String str = (new SimpleDateFormat("yyyy-MM-dd HH:mm:ss:SSS")) .format(new Date()); Calend ...

  9. PHP安装Redis扩展教程

    安装redis 下载软件包phpredis  https://github.com/nicolasff/phpredis uzip  master    #解压得到 phpredis-master c ...

  10. python中杂乱问题

    1 字符串格式化中的格式指定 format_spec ::= [[fill]align][sign][#][][width][,][.precision][type] fill ::= <any ...