【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址

2.回显数据并点标记

3.实现

第一步:引入资源文件

<!--引入高德地图JSAPI -->
<script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script>
<!--引入UI组件库(1.0版本) -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>

根据需要引入

第二步:代码

 1 var map,addMarker;
 2 var geocoder;
 3 var placeSearch;
 4 $(function(){
 5     // 加入高的地图
 6     map = new AMap.Map(‘mymap‘, {
 7            resizeEnable: true/* ,
 8            zoom:11,
 9            center: [116.397428, 39.90923] */
10     });
11     AMap.plugin([‘AMap.ToolBar‘,‘AMap.Scale‘],
12         function(){
13             map.addControl(new AMap.ToolBar());
14
15             map.addControl(new AMap.Scale());
16     });
17     AMap.service(‘AMap.Geocoder‘,function(){//回调函数
18         //实例化Geocoder
19         geocoder = new AMap.Geocoder({
20             city: "全国"//城市,默认:“全国”
21         });
22         //TODO: 使用geocoder 对象完成相关功能
23     });
24     // 加载搜索列表
25     myMapViewLocation();
26     AMap.service(["AMap.PlaceSearch"], function() {
27             placeSearch = new AMap.PlaceSearch({ //构造地点查询类
28             pageSize: 5,
29             pageIndex: 1,
30             city: "全国", //城市
31             map: map,
32             panel: "panel"
33         });
34     });
35     //为地图注册click事件获取鼠标点击出的经纬度坐标
36     var clickEventListener = map.on(‘click‘, function(e) {
37         $("input[name=lon]").val(e.lnglat.lng);
38         $("input[name=lat]").val(e.lnglat.lat);
39         // 填写地址
40         writeAddress([e.lnglat.lng,e.lnglat.lat]);
41     });
42     //placeSearch.search("北京");
43     $("#mymap_search").on("keydown",function(event){
44         if(event = event || window.event){
45             if(event.keyCode==13){
46                 mapsearch();
47             }
48         }
49     });
50 });
51 //地图搜索
52 function mapsearch(){
53     var searchVal = $("#mymap_search").val();
54     placeSearch.search(searchVal);
55 }
56 // 回显
57 function myMapViewLocation(){
58     //console.log("回显坐标");
59     var mlon = $("input[name=lon]").val();
60     var mlat = $("input[name=lat]").val();
61     var lnglatXY = [mlon,mlat];
62     if(mlon&&mlat){
63         addMarker(lnglatXY);
64     }
65 }
66 // 实例化点标记
67 function addMarker(lnglatXY) {
68     //console.log(lnglatXY);
69     marker = new AMap.Marker({
70         icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
71         position: lnglatXY
72     });
73     marker.setMap(map);
74     map.setFitView();// 执行定位
75 }
76 // 填写地址
77 function writeAddress(lnglatXY){
78     geocoder.getAddress(lnglatXY, function(status, result) {
79         if (status === ‘complete‘ && result.info === ‘OK‘) {
80             geocoder_CallBack(result);
81         }
82     });
83 }
84 // 地址回调
85 function geocoder_CallBack(data) {
86     var address = data.regeocode.formattedAddress; //返回地址描述
87     $("input[name=resourceAddress]").val(address);
88 }

可以参考官网:http://lbs.amap.com/api/javascript-api/example/map/map-show  可以学到更多东西。

不断尝试,化鹏为鸟。

时间: 04-26

【API】高德地图API JS实现获取坐标和回显点标记的相关文章

【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点.定位数据库可以不断完善不断补充,所以,越定位越准确.本文详细描述了,如果使用高德JS API来实现位置定位.城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法.当然,如果您的手机有GPS功能,那么使用浏览器定位的时候,会自动获取GPS信息,使

【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行

先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的.导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息. 2.我们这里说的步行导航和驾车导航,严格的说,应该是路线规划.从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据:如果是步行,过街天桥.地下通道.人行道做为搜索数据. ---------------------------

【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

摘要: 地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现. 第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.ht

【高德地图API】从零开始学高德JS API(四)搜索服务

摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现.第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.html

【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发者使用,减少开发者工作量的二级API接口.除了官方通用的鱼骨.鹰眼控件,还有大量官方开发的地图插件,类似谷歌的lib.当然本文还会介绍自定义插件的使用. ------------------------------------------------------------------------------------------------- 第一部分 控件 目前官方支持的控件包含:缩放控制条-地图

百度地图API和高德地图API资料集锦

[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 [高德地图API]从零开始学高德JS API(二)地图控件与插件--测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 [高德地图API]从零开始学高德JS API

高德地图api实现地址和经纬度的转换(python)

利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo/ 1.利用python第三方库requests实现 Requests库文档地址:http://www.python-requests.org/en/master/ 1 #!/usr/bin/env python3 2 #-*- coding:utf-8 -*- 3 ''' 4 利用高德地图api实

高德地图API INVALID_USER_SCODE问题以及keystore问题

今天这篇文章会给大家介绍三个问题: 1,接入API时出现invalid_user_scode问题 首先进行第一个大问题,接入高德地图API时出现invalid_user_scode问题 因为项目需要接入高德地图的API,在接入其它API时会出现类似问题,在进行定位的时候出现了下列问题 运行时log信息如下 可以看到,定位失败有两个原因: 1,错误代码为10,定位服务启动失败. 2,错误代码为7,key错误. 根据高德地图的官方使用文档的介绍,对相关问题进行处理 问题1:服务启动失败:检查清单配置

【高德地图API】如何获得行政区域?如何制作行政规划图?

什么是行政规划图?如何获得每个行政区域的边界轮廓图?举例:重庆市 江北区.如图: 官方类参考:http://developer.amap.com/javascript/reference/search#Partition 行政规划代码: function byDistrict(){          var partition = new AMap.Partition();  //创建一个新的行政规划类        partition.byDistrict(district,city,byDi