Vue高德地图粗略使用加踩坑

按照文档配置所有

<div id="container"></div>
<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>

// npm i @amap/amap-jsapi-loader --save
import AMapLoader from '@amap/amap-jsapi-loader';
data(){
      return{
        map:null,
     } 
 },
methods:{
    initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:5,           //初始化地图级别
                center:[105.602725,37.076636], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
    },
},

相当重要的一步 请配置安全密钥 不配置使用插件根本就不生效

• 文档

window._AMapSecurityConfig = {
  securityJsCode:'***************',
}

去除图标跟copyright

::v-deep .amap-logo {
  display: none;
  opacity: 0 !important;
}

::v-deep .amap-copyright {
  display: none;
  opacity: 0 !important;
}

图层使用

官方示例

//卫星图层
var satellite = new AMap.TileLayer.Satellite();
var roadNet = new AMap.TileLayer.RoadNet();
this.map = new AMap.Map("container", {  //设置地图容器id
  mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
  viewMode: "3D",    //是否为3D地图模式
  zoom: 10,           //初始化地图级别
  center: [111.153531, 37.505033], //初始化地图中心点位置
  layers: [satellite, roadNet]
});

轨迹

轨迹回放
还有一种做法就是一直更新marker得位置 一直remove 然后一直add 会很耗费性能

加载自己的3d模型配合threejs使用

自定义图层-GLCustomLayer 结合 THREE

搜索功能

 <div style="padding: 0 0 10px 0">
   <span>请输入关键字：</span>
   <input id="searchinput" ref="searchinputRef" v-model="inputValue"/>
 </div>

 //需要用到这俩插件'AMap.PlaceSearch','AMap.AutoComplete'
 AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
  var auto = new AMap.AutoComplete(autoOptions);
  var placeSearch = new AMap.PlaceSearch({
    map: map
  });  //构造地点查询类
  auto.on("select", select);//注册监听，当选中某条记录时会触发
  function select(e) {
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);  //关键字查询查询
  }

  placeSearch.on('markerClick', markerClick => {
    console.log(markerClick, 'markerClick2')
    var lonLat = [markerClick.event.lnglat.lng, markerClick.event.lnglat.lat]
    addMarkerM(lonLat)
    emit('markerClick', {lonLat, pname: markerClick.data.name})
  })

});

搜索功能 出不来列表

就这个搜索列表 明明network里面已经触发了搜索结果但是这里就是不显示
已查看元素发现被下面的地图挡住了
解决方法根css下

//高德地图搜索不往出显示
.amap-sug-result{z-index:8000!important;}

自定义maker

高德官方示例链接

  var position = new AMap.LngLat(116.397428, 39.90923);

    // 创建地图实例
    var map = new AMap.Map("container", {
        zoom: 13,
        center: position,
        resizeEnable: true
    });

    // 点标记显示内容，HTML要素字符串
    var markerContent = '' +
        '<div class="custom-content-marker">' +
        '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
        '   <div class="close-btn" onclick="clearMarker()">X</div>' +
        '</div>';

    var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
    });

    // 将 markers 添加到地图
    map.add(marker);

    // 清除 marker
    function clearMarker() {
        map.remove(marker);
    }

添加区域边界

 new mAMap.Polygon({
   map: map,
   path: zy_area.features[0].geometry.coordinates[0],
   bubble: true,
   fillColor: 'rgba(0,0,0)', // 多边形填充颜色
   fillOpacity: 0, // 多边形填充透明度，默认为0.9
   strokeColor: '#00eeff', // 线条颜色
   strokeWeight: 2,
   strokeOpacity: 0.8, // 轮廓线透明度，默认为0.9
   strokeStyle: 'solid', // 轮廓线样式，实线:solid，虚线:dashed
   /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
     ie9+浏览器有效 取值：
     实线：[0,0,0]
     虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
     点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
     线和10个像素的空白 （如此反复）组成的虚线*/
   strokeDasharray: [10, 2, 10]
 });

只显示某部分区域 （像这样）

// 外部大地图边界
let outer = [
  new mAMap.LngLat(-360, 90, true),
  new mAMap.LngLat(-360, -90, true),
  new mAMap.LngLat(360, -90, true),
  new mAMap.LngLat(360, 90, true)
];
var pathArray = [outer];
pathArray.push.apply(pathArray, zy_area.features[0].geometry.coordinates[0]);
// 反向遮罩环状多边形

let areaZz = new mAMap.Polygon({
   path: pathArray,
   bubble: true,
   fillColor: 'rgba(0,0,0)', // 多边形填充颜色
   fillOpacity: 1, // 多边形填充透明度，默认为0.9
   strokeColor: '#00eeff', // 线条颜色
   strokeWeight: 2,
   strokeOpacity: 0.5, // 轮廓线透明度，默认为0.9
   strokeStyle: 'dashed', // 轮廓线样式，实线:solid，虚线:dashed
   /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
     ie9+浏览器有效 取值：
     实线：[0,0,0]
     虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
     点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
     线和10个像素的空白 （如此反复）组成的虚线*/
   strokeDasharray:[10,2,10]
 });
map.add(areaZz);
map.setBounds(areaCc.getBounds());
map.setLimitBounds(areaCc.getBounds());