vue 使用高德地图vue-amap组件

方法一：通用方法不用区分vue2和vue3

1，修改public/index.html，添加以下内容

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'填写你的安全码',
    }
</script>

<script src="https://webapi.amap.com/loader.js"></script>

2，创建MapContainer.vue组件，以下内容

<template>
  <div class="box">
    <div
        id="container"
        style="width:500px; height:300px"
    ></div>
  </div>
</template>

<script>

export default {
  mounted () {
    AMapLoader.load({ //首次调用 load
      key:'你的key',//首次load key为必填
      version:'1.4.5', //必须用1.4.x版本
      plugins:['AMap.Scale']
    }).then((AMap)=>{
      var map = new AMap.Map('container');
      map.addControl(new AMap.Scale())


      var options = {
        'showButton': true,//是否显示定位按钮
        'buttonPosition': 'LB',//定位按钮的位置
        /* LT LB RT RB */
        'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
        'showMarker': true,//是否显示定位点
        'markerOptions':{//自定义定位点样式，同Marker的Options
          'offset': new AMap.Pixel(-18, -36),
          'content':'<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>'
        },
        'showCircle': true,//是否显示定位精度圈
        'circleOptions': {//定位精度圈的样式
          'strokeColor': '#0093FF',
          'noSelect': true,
          'strokeOpacity': 0.5,
          'strokeWeight': 1,
          'fillColor': '#02B0FF',
          'fillOpacity': 0.25
        }
      }
      AMap.plugin(["AMap.Geolocation"], function() {
        var geolocation = new AMap.Geolocation(options);
        map.addControl(geolocation);
        geolocation.getCurrentPosition()
      });



      AMap.plugin(['AMap.ToolBar'],
          function(){
            var toolopt = {
              offset :new AMap.Pixel(10,10),//相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
              /*
               *控件停靠位置
               *LT:左上角;
               *RT:右上角;
               *LB:左下角;
               *RB:右下角;
               *默认位置：LT
               */
              position : 'LT',
              ruler : true,//标尺键盘是否可见，默认为true
              noIpLocate : false,//定位失败后，是否开启IP定位，默认为false
              locate : true,//是否显示定位按钮，默认为false
              liteStyle : false,//是否使用精简模式，默认为false
              direction : false,//方向键盘是否可见，默认为true
              autoPosition : true,//是否自动定位，即地图初始化加载完成后，是否自动定位的用户所在地，在支持HTML5的浏览器中有效，默认为false
              locationMarker : AMap.Marker({map: map}),
              /**
               *是否使用高德定位sdk用来辅助优化定位效果，默认：false.
               *仅供在使用了高德定位sdk的APP中，嵌入webview页面时使用
               *注：如果要使用辅助定位的功能，除了需要将useNative属性设置为true以外，
               *还需要调用高德定位idk中，AMapLocationClient类的startAssistantLocation()方法开启辅助H5定位功能；
               *不用时，可以调用stopAssistantLocation()方法停止辅助H5定位功能。具体用法可参考定位SDK的参考手册
               */
              useNative : false
            }
            var toolbar  = new AMap.ToolBar(toolopt);
            //toolbar.hide();//隐藏toolbar

            map.addControl(toolbar);
            //启动监听
            toolbar.on('location',function(){
              alert(toolbar.getLocation());
            })
          }
      );



      map.plugin(["AMap.OverView"],function(){
        var view = new AMap.OverView({
          tileLayer:new AMap.TileLayer({
            //显示的是google上显示的图层
            tileUrl:"http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil"//图块取图地址
          }),
          isOpen:true,
          visible:true
        });
        console.log(view.getTileLayer());
        map.addControl(view);
      });





      map.add(new AMap.Marker({
        position:map.getCenter()
      }));
    }).catch((e)=>{
      console.error(e);
    });

  },
  methods: {



  }
}
</script>

3，在你需要的地方引入

<MapContainer></MapContainer>

import MapContainer from "@/components/MapContainer.vue"

export default {
   name: "indexpage",
   components: {
      MapContainer
   }
}

修改高德切片地图/瓦片图

var key = 'xxxx'
var xyzTileLayer = new AMap.TileLayer({
// 天地图底图图块取图地址
getTileUrl: `http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=vec_w&tk=${key}&x=[x]&y=[y]&l=[z]`,
zIndex: 1
})


var wordTileLayer = new AMap.TileLayer({
// 天地图文字标注图块取图地址
getTileUrl: `http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cva_w&tk=${key}&x=[x]&y=[y]&l=[z]`,
zIndex: 2
})

var map = new AMap.Map('container', {
  // resizeEnable: true,
  // center: [120.18870707737302, 30.2356591501443],
  // zoom: 17,
  layers: [
    xyzTileLayer,
    wordTileLayer
  ],
});

定位案例：https://sdeno.com/map.html

拖拽选中地址：https://sdeno.com/zp/map2.html

文档：

https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

https://www.wenjiangs.com/doc/mdxkhhtr

方法二：

 npm install -S vue-amap

编辑 main.js

import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: 'you key',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
v: '1.4.4'

});

demo1

map.vue文件

<template>
    <div class="_map">
        <div class="amap-page-container">
            <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" ></el-amap-search-box>
            <el-amap ref="map"  vid="amapDemo" :plugin="plugin"  :zoom="zoom" :center="center" class="amap-demo" :events="events">
                <el-amap-marker vid="component-marker" :position="makerConf.position" :content="makerConf.content"  ></el-amap-marker>
            </el-amap>
        </div>
        <div class="adrs">
            <ul>
                <li class="" v-for="(item,index) in list" :key="index" :class="currIndex == index ? 'active':''"  @click="select(item,index)">
                    <p class="address">{{item.address}}</p>
                    <p class="nm">{{item.name}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<style>
    .amap-page-container{
        height: 300px;
        position: relative;
    }
    .search-box {
        position: absolute !important;
        top: 25px;
        left: 20px;
        z-index: 200 !important;
    }
    .amap-demo {
        height: 300px;
    }
    .amap-logo {
        display: none;
    }
    .amap-copyright {
        bottom:-100px;
        display: none;
    }
    .amap-scalecontrol{
        bottom: 4px !important;
    }
    .amap-geolocation-con{
        bottom: 30px !important;
        z-index: 199 !important;
    }
    ul li.active{
        color: deeppink;
    }
</style>

<script>


    export default {
        name: 'amap-page',
        components: {},
        data() {
            var me = this;
            me.city = me.city || '武汉';
            return {
                list:[],
                currIndex:0,
                zoom: 16,
                center: [114.397169, 30.50576],
                events:{
                    init: (o) => {
                        o.setCity(me.city,result => {
                            console.log("----------setCity",result);
                            if(result && result.length > 0){
                                me.zoom = 16;
                                me.makerConf.position = result;
                                me.getList(result);
                            }
                        });
                        //去掉logo
                        document.getElementsByClassName("amap-logo")[0].style.display = "none";
                    },
                    "dragend":function(e){
                        //console.log("dragging",e,this.getCenter());
                        var point = this.getCenter();
                        var pos = [point.lng,point.lat];
                        me.makerConf.position =  [point.lng,point.lat];
                        me.getList(pos);
                    }
                },
                makerConf: {
                    position:  [114.397169, 30.50576],
                    content:""
                },
                searchOption: {
                    city: me.city,
                    citylimit: true
                },
                plugin:[
                    'ToolBar',
                    'Scale',
                    {
                        pName: 'Geolocation',
                        events: {
                            init(o) {

                            },
                            complete:function(result){
                                //定位成功
                                var address = result.formattedAddress
                                var point = result.position;
                                var obj = {
                                    address:address,
                                    name:"",
                                    location:point
                                }
                                me.list = [obj];
                                me.makerConf.position =  [point.lng,point.lat];
                            },
                            error:function(){

                            }
                        }
                    }
                ]
            };
        },
        created(){
            var me = this;

        },
        mounted(){

        },
        methods: {
            select:function(item,index){
                var me = this;
                me.currIndex = index;
                var point = item.location;
                me.makerConf.position =  [point.lng,point.lat];
                me.center = [point.lng,point.lat];

            },
            //this.$refs.map.$getCenter()
            getList:function(result){
                //获取列表
                var me = this;
                me.$Geocoder({
                    lnglatXY:result,
                    success:function(res){
                        if(res.regeocode && res.regeocode.pois){
                            me.list = res.regeocode.pois;
                        }else{
                            me.list = [];
                        }
                    },
                    error:function(res){
                        me.list = [];
                    }
                });

            },
            onSearchResult(pois) {
                //搜索
                let latSum = 0;
                let lngSum = 0;
                var me = this;

                var mymap = me.$refs.map.$getInstance();

                if (pois && pois.length > 0) {

                    //如果长度为1则无需转化
                    var poi = pois[0];
                    var lng = poi["lng"];
                    var lat = poi["lat"];
                    me.center = [lng, lat];
                    me.makerConf.position  = [lng, lat];
                    //me.makerConf.content = poi.name;
                    me.list = pois;
                }else{
                    me.list = [];
                }
            },

            $Geocoder(options){
                //将坐标点转化为，详细地址
                options = options || {};
                if(AMap){
                    AMap.plugin(['AMap.Geocoder'], () => {
                        const geocoder = new AMap.Geocoder({
                            radius: options.radius || 1000,
                            extensions: options.extensions || "all"
                        })
                        var  lnglatXY = options.lnglatXY || [114.397169, 30.50576]; //已知点坐标
                        geocoder.getAddress(lnglatXY, function(status, result) {
                            if (status === 'complete' && result.info === 'OK') {
                                options.success && options.success(result);
                            }else{
                                options.error && options.error(status,result);
                            }
                        });
                    });

                }

            }
        },
        "watch":{
            list:function(){
                this.currIndex = 0;
            }
        }

    };

    /*
      me.$Geocoder({
                    lnglatXY:[center.lng, center.lat],
                    success:function(res){
                        console.log(res);
                    }
        });
     *
     * */
</script>

https://www.cnblogs.com/muamaker/p/9543453.html

demo2

//编辑main.js

import AMap from 'vue-amap'

Vue.use(AMap)
AMap.initAMapApiLoader({
  key: 'e5ea8ec2f20fb3d3e86b8a37a072923e',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',
    'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor',
    'AMap.CircleEditor', 'AMap.Geolocation', 'AMap.Geocoder', AMap.Map],
  v: '1.4.15',
  uiVersion: '1.0'
})

随便一个页面

ssp-intoEvent