高德地图api

一、vue使用高德地图通过坐标显示指定位置

1、通过NPM安装vue-amap模块：

npm install --save vue-amap

2、在main.js中引用vue-amap：

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
    key: '申请的高德地图Key'
});

3、在vue组件中使用：

<template>
  <div>
    <el-amap
      :center='center'
      :zoom='zoom'
    >
      <el-amap-marker 
        :position="center"
        :label="label"
      ></el-amap-marker>
    </el-amap>
  </div>
</template>
<script>
data() {
  return {
    center: [116.397428, 39.90923],	//地址坐标
    zoom: 15,	//缩放大小
    label:{
      content: '自定义标题',
      offset:[10,12]
    }
  }
}
</script>

注意：

label 对象中的 content 为下图中的自定义标题文字，offset 为下图中的蓝点位置坐标（具体代表啥，暂时没搞清楚）

原文：传送门

二、 js高德地图获取当前位置信息

<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>
  var map = new AMap.Map('mapContainer', {
resizeEnable: true
})

map.plugin('AMap.Geolocation', function () {
    var geolocation = new AMap.Geolocation({
        // 是否使用高精度定位，默认：true
        enableHighAccuracy: true,
        // 设置定位超时时间，默认：无穷大
        timeout: 10000,
        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
        buttonOffset: new AMap.Pixel(10, 20),
        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        zoomToAccuracy: true,
        //  定位按钮的排放位置,  RB表示右下
        buttonPosition: 'RB'
    })
    // 获取当前位置信息
    geolocation.getCurrentPosition();
    // 监听获取位置信息成功的回调函数
    AMap.event.addListener(geolocation, 'complete', onComplete);
    // 监听获取位置信息错误的回调函数
    AMap.event.addListener(geolocation, 'error', onError);

    function onComplete(data) {
        // data是具体的定位信息
        console.log(data);
    }

    function onError(error) {
        // 定位出错
        console.log(error);
    }
})

原文：传送门