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

最新推荐文章于 2024-04-23 14:51:10 发布

转载最新推荐文章于 2024-04-23 14:51:10 发布 · 1.6w 阅读

java笔记专栏收录该内容

80 篇文章

订阅专栏

本文介绍如何使用高德地图API实现地图搜索、经纬度获取及地址解析等功能，并提供了一个具体的JavaScript代码示例。

部署运行你感兴趣的模型镜像

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 }