web页面集成高德地图

发表于 | 分类于 |

今天因为领导角色用户自己手工收入位置不好校验正确性，并不友好。决定做一个类似于外卖定位的地图组建。

  1. 获取用户的输入，进行模糊匹配
  2. 在地图上定位，并标记
  3. 用户选区标记，返回位置坐标
  4. 保存到数据库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>位置更新</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <script src="../jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=自己的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script src="../js/map.js"></script>
<style>
    #map{
        width: 500px;
        height: 300px;
    }
</style>
</head>
<body>
<div>
<input type="text" id="tipinput" placeholder="请输入关键字"/>
    <input type="text" id="lnglat" placeholder=""/>
    <input type="text" id="address" placeholder=""/>
</div>
<div id="map"></div>
</body>
</html>

页面主要是定义地图所装载的容器，引入高德地图所需的文件。js文件主要用来获取用户 数据，和获取用户标记事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(function () {
    //地图加载
    var map = new AMap.Map("map", {
        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);  //关键字查询查询
    }
//点击事件
    AMap.event.addListener(placeSearch, "markerClick", function(e) {
        console.log(e.data.location);//当前marker的经纬度信息
        document.getElementById("lnglat").value = e.data.location.lng + ',' + e.data.location.lat;
        console.log(e.data.address);//获取当前marker的具体地址信息
        console.log(e.data);//则是包含所有的marker数据
        document.getElementById("address").value = e.data.pname+e.data.cityname+e.data.adname+e.data.address+e.data.name;
    });
});
分享