在vue+webpack项目中引入高德地图API

vue+webpack引入高德地图及使用相关功能1.申请key(高德地图API官网介绍的比较详细http://lbs.amap.com/api/javascript-api/summary/)2.引入高德地图(在index.html中引入JSAPI)(如果点击地图报错,后面拼接callback=init试试)<script type="text/javascript&quo

CrazyMan66

7991人浏览 · 2018-04-04 10:38:28

CrazyMan66 · 2018-04-04 10:38:28 发布

vue+webpack引入高德地图及使用相关功能

1.申请key

(高德地图API官网介绍的比较详细http://lbs.amap.com/api/javascript-api/summary/)

2.引入高德地图

(在index.html中引入JSAPI)(如果点击地图报错,后面拼接callback=init试试)

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=您申请的高德key值&callback=init"></script>

//引用高德组件UI,有需要可以使用(1.0版本)

<script src="//webapi.amap.com/ui/1.0/main.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您申请的百度key值"></script>

<script>
  //初始化地图(如果点击地图报错,后面拼接callback=init)
  function init() {
  }
</script>

3.修改配置文件

(注意:在build/webpack.base.conf.js 加入如下配置，负责vue中使用import会报错。如果如下导入还AMap报错，请使用window.AMap)

externals: {

'AMap':'AMap',

'BMap':'BMap',

'AMapUI':'AMapUI'

     // 'AMap': 'window.AMap'

}

4.在自己定义的vue组件中引入AMap

<template>
  <div id="Sharingrouter">
    <div id="container" ref="container">

    </div>
    <div id="panel"></div>
  </div>
</template>


<script>
  var map;
  export default {
    data() {
      return {
      	
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        var map = new AMap.Map("container", {
          resizeEnable: true,
          center: [116.397428, 39.90923],//地图中心点
          zoom: 12 //地图显示的缩放级别
        });

	//添加构造器
        AMap.plugin(['AMap.Driving', 'AMap.Transfer', 'AMap.Walking'], function () {
          map.addControl(new AMap.Driving());
          map.addControl(new AMap.Transfer());
          map.addControl(new AMap.Walking());

        });
     
    }
  }


</script>

<style>

/*如果没有地图可能是容器没有设置宽高*/

#container {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}

</ style >

5.高德地图常用的方法

(1)显示地图

选定地图的div容器

var map = new AMap.Map('container', {

resizeEnable: true,

zoom:11,

center: [116.397428, 39.90923]

});

(2)地图常用控件

工具条	ToolBar	集成了缩放、平移、定位等功能按钮在内的组合控件
比例尺	Scale	展示地图在当前层级和纬度下的比例尺
定位	Geolocation	用来获取和展示用户主机所在的经纬度位置
鹰眼	OverView	在地图右下角显示地图的缩略图
类别切换	MapType	实现默认图层与卫星图、实施交通图层之间切换的控

举例:AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],

function(){

map.addControl(new AMap.ToolBar());

map.addControl(new AMap.Scale());

map.addControl(new AMap.OverView({isOpen:true}));

});

(3)点标注使用自定义的图标来标记

var icon = new AMap.Icon({

image : 'http://vdata.amap.com/icons/b18/1/2.png',//24px*24px

//icon可缺省，缺省时为默认的蓝色水滴图标，

size : new AMap.Size(24,24)});

var marker = new AMap.Marker({

icon : icon,//24px*24px

position : provinces[i].center.split(','),

offset : new AMap.Pixel(-12,-12),

map : mapObj

});

参数名称	类型	说明
size	Size	图标尺寸，默认值(36,36)
imageOffset	Pixel	图标取图偏移量。当image使用了图片精灵时，可通过size和imageOffset配合，显示图标的指定范围
image	String	图标的取图地址。默认为蓝色图钉图片
imageSize	Size	修改原始图片的大小，将拉伸或压缩图片，等同于CSS中的background-size属性。可用于实现高清屏的高清效果

(4)输入提示

//输入提示
var auto = new AMap.Autocomplete({
input: "tipinput"

});

(5)地点规划+步行路线规划

//步行导航
var walking = new AMap.Walking({
map: map,
panel: "panel"
});
walking.search([
{keyword: '北京市地震局(公交站)',city:'北京'},
{keyword: '亦庄文化园(地铁站)',city:'北京'}
]);

6.个人在项目中封装了用到的方法

//  (1)    自己定义坐标点样式
      icon() {

//                  arrXY是存储点过的坐标点数组
        for (var i = 0; i < this.arrXY.length; i++) {
          //              加坐标点 
          var icon = new AMap.Icon({
            image: 'http://imgp.timeprints.net/end1.png',//24px*24px
            //icon可缺省，缺省时为默认的蓝色水滴图标，
            size: new AMap.Size(22, 26),
            offset: new AMap.Pixel(0, 0)
          });
          new AMap.Marker({
            position: this.arrXY[i], //marker所在的位置
            map: map, //创建时直接赋予map属性
            icon: icon,
            offset: new AMap.Pixel(-12, -12)
          });
        }
      },

// (2) 定义编辑折线
      editLine() {
        var arr = new Array();//arrX和arrY经纬度坐标数组
        for (var i = 0; i < this.arrX.length - 1; i++) {
          arr.push(new AMap.LngLat(this.arrX[i], this.arrY[i]));
          arr.push(new AMap.LngLat(this.arrX[i + 1], this.arrY[i + 1]));

//定义折线对象
          this.polyline = new AMap.Polyline({
            path: arr,     //设置折线的节点数组
            strokeColor: "#004ea2",
            strokeWeight: 6,

          });
            this.polyline.setMap(map);//地图上添加折线

//构造折线编辑对象，并开启折线的编辑状态
          map.plugin(["AMap.PolyEditor"], () => {
            this.polylineEditor = new AMap.PolyEditor(map, this.polyline);
          });
        }
      },

//  (3)    定义定位获取当前位置
      geol() {
        //添加构造器
        AMap.plugin(['AMap.Geolocation'], function () {

          map.addControl(new AMap.Geolocation())
        })
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 10000,          //超过10秒后停止定位，默认：无穷大
          maximumAge: 0,           //定位结果缓存0毫秒，默认：0
          convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: false,        //显示定位按钮，默认：true
//          buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          showMarker: false,        //定位成功后在定位到的位置显示点标记，默认：true
          showCircle: false,        //定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
//        一定要add添加
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', (suc) => {
//          如果在北京就定位
          if (suc.addressComponent.citycode == '010') {
            this.locatX = suc.position.M
            this.locatY = suc.position.O
          } else {
            this.locatX = 116.397428
            this.locatY = 39.90923
          }
        });//返回定位信息
        AMap.event.addListener(geolocation, 'error', (err) => {
          console.log(err);
        });      //返回定位出错信息
      },

(4)定义步行路线(驾车公交类似具体查看高德官网API)
      walker() {
        if (this.index === 2) {
//          每次执行将存储步行路线坐标的数组清空
          this.arrSortX = [];
          this.arrSortY = [];
//            遍历点击的坐标数组
          for (var i = 0; i < this.arrX.length - 1; i++) {
//            this.arrSortX=[];
//            this.arrSortY=[];
//          步行路线
            var walking = new AMap.Walking({
              map: map,
              panel: "panel",
              autoFitView: false,
              hideMarkers: true
            });
//            该方法获取步行路线，以及获取该段路线的坐标（并进行剖点处理）
            walking.search([this.arrX[i], this.arrY[i]], [this.arrX[i + 1], this.arrY[i + 1]], (status, result) => {
              console.log(result.routes);
              if (result.routes[0].steps.length <= 8) {
                for (var j = 0; j < result.routes[0].steps.length; j++) {
                  this.arrSortX.push(result.routes[0].steps[j].start_location.M);
                  this.arrSortX.push(result.routes[0].steps[j].end_location.M);
                  this.arrSortY.push(result.routes[0].steps[j].start_location.O);
                  this.arrSortY.push(result.routes[0].steps[j].end_location.O);
                }
              } else {
                for (var j = 0; j < result.routes[0].steps.length; j += 3) {
                  this.arrSortX.push(result.routes[0].steps[j].start_location.M);
                  this.arrSortX.push(result.routes[0].steps[j].end_location.M);
                  this.arrSortY.push(result.routes[0].steps[j].start_location.O);
                  this.arrSortY.push(result.routes[0].steps[j].end_location.O);
                }
              }
//              记录每一次点击获取的坐标个数   记录每段路线获取的所有坐标点的长度
              try {
                this.indexLength = this.arrSortX.length
                if (i == (this.arrX.length - 1)) {
                  this.indexLengthArr.push(this.indexLength)
                }
              } catch (e) {
                console.log(e);
              }
            });
          }

        }
      },

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^