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

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

2.回显数据并点标记

3.实现

第一步：引入资源文件

<script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script>

<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 }

高德地图API JS实现获取坐标和回显点标记相关推荐

高德地图api @amap/amap-jsapi-loader封装成方法(定位、点标记、路径规划、搜索等) 适用于vue等框架
高德地图api 封装成公共方法用于项目中目前封装的方法有定位点标记比例尺插件信息窗体经纬度附近搜索关键字搜索交通路径规划(经纬度或地点名) 步行路径规划(经纬度或地点名) 经纬度获取地 ...
高德地图API - 根据经纬度获取周边建筑地标
根据当前的定位获取附近的地标 // 高德地图查询周边 function aMapSearchNearBy(centerPoint, city) {AMap.service(["AMap.Pl ...
vue 高德地图API根据地址获取经纬度/根据经纬度获取地址
1.引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&am ...
android 地铁地图api,利用高德地图api绘制公交+地铁的等时圈
等时圈是指从某点出发,以某种交通方式在特定时间内能到达的距离覆盖的范围,在可达性分析中十分常见.原本我们需要将地图栅格化不停地调用路径规划api来获得等时圈,现在已经有网站为我们做好了这些工作,比如h ...
高德地图 API 显示跑步路线
模仿对象此前在尝试制作时,我采用 Nike+ 官网效果为模板仿制.目前 Nike+ 已经升级,看不了之前版本的样式及动态效果,暂且看看样式区别不大的 Nike+ Run Club App 地图,动画 ...
python百度地图api经纬度_Python调用百度地图和高德地图API批量获取国内城市地址经纬度坐标...
1 数据准备经过尝试,百度地图API需要输入城市中文名称才能获取对应经纬度坐标,因此先将英文的城市名称转为中文一共347个城市由于在测试过程中发现高德和百度地图API分别有几个城市的地址无法获取 ...
【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图...
原文:[高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
调用腾讯地图API.高德地图API 获取当前地理位置.经纬度 web开发中,很多情况下都会需要获取当前位置的经纬度,在网上找了几个不同的地图,最终找到兼容比较好的腾讯地图API 1.调用腾讯地图API ...
【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文地址为: [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址 ...

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

高德地图API JS实现获取坐标和回显点标记相关推荐

最新文章

热门文章