①在高德地图开发平台注册一个账号,获取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. oracle 11g自动时间分区备忘

    一.时间date类型:create table spdb_demo(outBeginDate date,)partition by range(outBeginDate) interval(numto ...

  2. JProfiler_SN_8_x key

    按默认选择“Single or evaluation license”Name 和 Company 随意-----------------------忧郁的分割线------------------- ...

  3. TOMCAT问题总结

      迁移时间--2017年7月9日14:58:12Author:Marydon CreateTime--2016年12月25日21:55:09Author:MarydonTomcat问题总结问题一 A ...

  4. url请求返回结果测试工具(CURL)

    官网:http://curl.haxx.se/download.html 具体用法用时百度 或  到时再补充

  5. Python之上下文管理器

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之上下文管理器 #http://python.jobbole.com/82620/ #语法形式: ...

  6. HashTable、List、ArrayList的经典使用和相互转换

    1.添加引用 using System.Collections; 2.创建并添加数据 Hashtable hs = new Hashtable(); hs.Add("Name1", ...

  7. 【LeetCode】135. Candy

    Candy There are N children standing in a line. Each child is assigned a rating value. You are giving ...

  8. DropBox 超实用的免费文件网络同步、备份、分享工具

    http://www.iplaysoft.com/dropbox.html DropBox 就是一款非常好用的免费网络文件同步工具(当然它也算是一个服务).当你在电脑A使用DropBox时,指定文件夹 ...

  9. Linux内核(2) - 分析内核源码如何入手(上)

    透过现象看本质,兽兽们无非就是一些人体艺术展示.同样往本质里看过去,学习内核,就是学习内核的源代码,任何内核有关的书籍都是基于内核,而又不高于内核的. 既然要学习内核源码,就要经常对内核代码进行分析, ...

  10. 转 MySQL中的共享锁与排他锁

    原文链接在MySQL中的行级锁,表级锁,页级锁中介绍过,行级锁是Mysql中锁定粒度最细的一种锁,行级锁能大大减少数据库操作的冲突.行级锁分为共享锁和排他锁两种,本文将详细介绍共享锁及排他锁的概念.使 ...