vue2.0及以上版本引高德地图，实现点坐标及多地址切换

申明：本文为博主原创文章，未经博主允许不得转载。 https://blog.****.net/qq_43360935/article/details/86622186
我这个项目是基于vue3.0，引用vue-amap开发的。
有兴趣的猿友们可以去官网看API：https://elemefe.github.io/vue-amap/#/
1.安装:
npm install vue-amap --save
2.在main.js里引入：
import VueAMap from ‘vue-amap’;
然后使用（以下代码可以直接复制）
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: ‘去高德地图申请一个key,复制到这里’,
plugin: [‘AMap.Autocomplete’, ‘AMap.PlaceSearch’, ‘AMap.Scale’, ‘AMap.OverView’, ‘AMap.ToolBar’, ‘AMap.MapType’, ‘AMap.PolyEditor’, ‘AMap.CircleEditor’],
// 默认高德 sdk 版本为 1.4.4
v: ‘1.4.4’,
uiVersion: ‘1.0.11’ // 这个是引官方ui组件库的时候要用的你不引就不要写
});
3.在你要用到的页面组件里写以下代码(DOM结构)

 <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :style="{width:'690px',height:'490px'}">
     <el-amap-marker vid="component-marker" :position="componentMarker.position" :content-render="componentMarker.contentRender" ></el-amap-marker>
     <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
 </el-amap>
  <div class="message animated fadeInRight">
                <ul>
                    <li class="active" v-on:click="changePosition">
                        <p>地址1</p>
                    </li>
                    <li  v-on:click="chnageDraggle">
                        <p>地址2</p>
                    </li>
                    <li  v-on:click="addMarker">
                        <p>地址3</p>
                    </li>
                    <li  v-on:click="removeMarker">
                        <p>地址4</p>
                    </li>
                </ul>
            </div>
           备注： 样式自己可以根据自己的需求设置

4.在js中写入以下代码，（这里有的代码是可以删除的，一些不用的就可以删除，减少代码冗余）：

 module.exports = {
        name: 'amap-page',
        data() {
            return {
                count: 1,
                slotStyle: {
                    padding: '2px 8px',
                    background: '#eee',
                    color: '#333',
                    border: '1px solid #aaa'
                },
                zoom: 14,
                center: [121.5273285, 31.21515044],  //中心点的坐标
                markers: [
                    {
                        position: [121.5273285, 31.21515044],  //定位的坐标
                        events: {
                            click: () => {
                                alert('click marker');
                            },
                            dragend: (e) => {
                                console.log('---event---: dragend')
                                this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
                            }
                        },
                        visible: true,
                        draggable: false,
                        template: '<span>1</span>',
                    }
                ],
                renderMarker: {
                    position: [121.5273285, 31.21715058],
                    contentRender: (h, instance) => {
                        return h(
                            'div', //这些都可以删除不要 
                            {
                                style: {background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'},
                                on: {
                                    click: () => {
                                        const position = this.renderMarker.position;
                                        this.renderMarker.position = [position[0] + 0.002, position[1] - 0.002];
                                    }
                                }
                            },
                            ['marker inner text']
                        )
                    }
                },
                componentMarker: {
                    position: [121.5273285, 31.21315058],//这些我也不知道是啥，不用的可以删除
                    contentRender: (h, instance) => h(exampleComponents,{style: {backgroundColor: '#fff'}, props: {text: 'father is here'}}, ['xxxxxxx'])
                },
                slotMarker: {
                    position: [121.5073285, 31.21715058]
                }
            };
        },
        methods: {
            onClick() {
                this.count += 1;
            },
            changePosition() {
                this.markers[0].position = [103.695081, 36.531658];
                this.center = [103.695081,36.531658];
            },
        }
    };
    //以下是点击切换地图的方法
    //如果你只知道地址不知道地址的经纬度的话，可以去https://lbs.amap.com/console/show/picker 这个网址查
       methods:{
            onClick(){
                this.count += 1;
            },
            changePosition() {
                this.markers[0].position = [地址1的坐标]; 
                this.center = [地址1的坐标];
            },
            chnageDraggle(){
                this.markers[0].position = [地址2的坐标];
                this.center = [地址2的坐标];
            },
            addMarker(){
                this.markers[0].position = [地址3的坐标];
                this.center = [地址3的坐标];
            },
            removeMarker(){
                this.markers[0].position = [地址4的坐标];
                this.center = [地址4的坐标];
            }
        },

5.css样式
样式可以根据自己的需求写，引入的地图一定要给高，不然不出来
6.效果展示如下
点击右边的地址则会切换到相应的地图。
vue2.0及以上版本引高德地图，实现点坐标及多地址切换
以上就是完整的点坐标定位和多地址切换，感谢支持！多多指教。

vue2.0及以上版本引高德地图，实现点坐标及多地址切换

相关推荐