uni-app 接入高德地图案例

深碍√TFBOYSˉ_ 2022-03-06 08:58 1018阅读 0赞

第一步：注册高德地图开发者账号 地址：[https://lbs.amap.com/][https_lbs.amap.com]

第二步：创建自己的应用 （我这里是小程序的）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNoaW5lXzA3MDc_size_16_color_FFFFFF_t_70][]

第三步：下载相关sdk文件，导入amap-wx.js到项目中

第四步：创建AMapWX对象  
    方式一：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNoaW5lXzA3MDc_size_16_color_FFFFFF_t_70 1][]

方式二：

![20190318161922911.png][]  第四步：代码编写

/**  
     * map 用到的属性 
     * @param width map宽度
     * @param height map高度
     * @param latitude 中心纬度
     * @param longitude 中心经度
     * @param scale 缩放级别，取值范围为5-18
     * @param markers 标记点 
     * @param show-location 显示带有方向的当前定位点
     * @param markertap 点击标记点时触发
     * */         
    <template>
    <view>
    <view class="page-body">
    <view class="page-section page-section-gap">
    <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" scale="16" :markers=markers
            show-location="true" @markertap=markertap>
    </map>
    </view>
    </view>
    </view>
    </template>
    
    <script>
       export default {
            data() {
            return {
            markers: [{}, {}, {}],
            poisdatas: [{}, {}, {}],
            title: 'map',
            latitude: 30.208487,
            longitude: 120.21202,
            }
            },
          onLoad() {
            var that = this;
            var amapFile = require('../../gaodemap/amap-wx.js');
            var amapPlugin = new amapFile.AMapWX({
            key: "d79********************c2"
            });
            amapPlugin.getPoiAround({
            success: function(data) {
            //成功回调
            that.markers = data.markers;
            that.poisdatas=data.poisData;
            var markers_new = [];
            that.markers.forEach(function(item, index) {
            markers_new.push({
            id: item.id,              //marker 序号
            width: item.width,        //marker 宽度
            height: item.height,      //marker 高度
            iconPath: item.iconPath,  //marker 图标路径
            latitude: item.latitude,  //marker  纬度
            longitude: item.longitude, //marker 经度
            //自定义标记点上方的气泡窗口
            callout:{
            padding:2,        //callout 文本边缘留白
            fontSize:15,      //callout  文字大小
            bgColor:'blue',   //callout 背景颜色
            color:'#6B8E23',  //callout 文字颜色
            borderRadius:5,   //边框圆角
            display:'BYCLICK',//callout 'BYCLICK':点击显示; 'ALWAYS':常显
            content:that.poisdatas[index].name //地理位置名称
            }
            })
            })
            that.markers = markers_new;
            console.log("data", JSON.stringify(that.poisdatas));
            },
            fail: function(info) {
            //失败回调
            console.log("info", info)
            }
            })
         },
         methods: {
           //得到点击的marker的id，遍历markers数组，判断有没有相等的id
           //如果有的就能从this.poisdatas[i].address得到坐标位置（没有就提醒下）
            markertap: function(e) {
            for (var i = 0; i < this.markers.length; i++) {
            if (JSON.stringify(e).substring(18, 20) == this.markers[i].id) {
            console.log("markers" + this.poisdatas[i].name+"   "+this.poisdatas[i].address);
            uni.showToast({
            title: this.poisdatas[i].name,
            mask: false,
            duration: 1500
            });
            }
            }
    
            }
            }
         }
    </script>
    
    <style>
    </style>

第五步：效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNoaW5lXzA3MDc_size_16_color_FFFFFF_t_70 2][]

点击marker显示callout

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNoaW5lXzA3MDc_size_16_color_FFFFFF_t_70 3][]

第二部分：针对下面博友问的怎么连接点。

1.代码编写

data() {
       return {
             markers: [{}, {}, {}],
       poisdatas: [{}, {}, {}],
       title: 'map',
             latitude: 30.208487,
             longitude: 120.21202,
             SRC: '111111111111',
             polyline: [{ //添加polyline数组，设置要连接的点（从数组的第一项连接到最后一项），这里只设置连接两个点，演示下
               points: [{ 
                   latitude: 30.208487,
                   longitude: 120.21202
                 },
                 {
                   latitude: 30.209403,
                   longitude: 120.213845
                },
              ],
                   color: "#000000", //设置连接的线的颜色
                    width: 2, //线的宽度
                    dottedLine: true, //线是否是虚线
                    arrowLine: true,//线是带箭头的线，开发者工具暂时不支持
               }],
    
          }
    },

<view class="page-section page-section-gap"> // 绑定polyline数组
    <map style="width: 100%; height: 300px;" :polyline='polyline' :latitude="latitude" :longitude="longitude" scale="17" :markers=markers show-location="true" @markertap=markertap>
    </map>
    </view>

2.效果

![20190412164739835.gif][]

这个链接是是有效的，我试过啊。  
源码地址：[https://pan.baidu.com/s/1Wf3b2YpuaJjE7aaDkEgawA][https_pan.baidu.com_s_1Wf3b2YpuaJjE7aaDkEgawA]

密码：w3mk  
gitlab源码地址  
[https://git.lug.ustc.edu.cn/sunshine\_0707/map][https_git.lug.ustc.edu.cn_sunshine_0707_map]

**我这里是小程序，是在微信开发者工具上显示的，不是app啊，你们自己注意点这个啊。**

[https_lbs.amap.com]: https://lbs.amap.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNoaW5lXzA3MDc_size_16_color_FFFFFF_t_70]: /images/20220303/3179a5d498f145abad1e099448e50aa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNoaW5lXzA3MDc_size_16_color_FFFFFF_t_70 1]: /images/20220303/99937da8393443f487e515879a442153.png
[20190318161922911.png]: /images/20220303/934f20ae2bb340c88796919403c42c59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNoaW5lXzA3MDc_size_16_color_FFFFFF_t_70 2]: /images/20220303/bb2aa46ecd664dc496895aa3efe1ed5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNoaW5lXzA3MDc_size_16_color_FFFFFF_t_70 3]: /images/20220303/6339e9cb513144709fe6359eb2099818.png
[20190412164739835.gif]: /images/20220303/758c1861109744799ecba11300e737fc.png
[https_pan.baidu.com_s_1Wf3b2YpuaJjE7aaDkEgawA]: https://pan.baidu.com/s/1Wf3b2YpuaJjE7aaDkEgawA
[https_git.lug.ustc.edu.cn_sunshine_0707_map]: https://git.lug.ustc.edu.cn/sunshine_0707/map