Vue 高德地圖 路徑規劃 畫點

時間  2019-11-15
標籤 vue 地圖 路徑 規劃 简体版
原文   原文鏈接

CDN 方式javascript

<!--引入高德地圖JSAPI -->
<script src="//webapi.amap.com/maps?v=1.4.13&key=您申請的key值"></script>

<!--引入UI組件庫（1.0版本） -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>

配置externals 文件路徑 build>webpack.base.conf.js > module.exports = {}vue

  externals: {
    'AMap': 'AMap',
    'AMapUI': 'AMapUI'
  },

頁面實現java

<template>
  <div class="amap-page-container">
    <div id="container" style="width:100vw;height:70vh"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    // 配置
  },
  mounted() {
    this.$nextTick(() => {
      var map = new AMap.Map("container", {
        center: [116.397559, 39.89621],
        zoom: 14
      });
      // 定義圖標信息
      var icon = new AMap.Icon({
        // 圖標尺寸
        size: new AMap.Size(32, 46),
        // 圖標的取圖地址
        image:
          "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
        // 圖標所用圖片大小
        imageSize: new AMap.Size(32, 46)
      });
      // 文字描述內容
      var labelContent = "<span>1</span>";
      // 文字描述顯示位置
      var labelOffset = new AMap.Pixel(8, 7);
      // 繪製座標點
      var marker = new AMap.Marker({
        icon: icon,
        position: [116.303843, 39.983412],
        offset: new AMap.Pixel(-10, -46),
        title: 1,
        text: 1,
        label: {
          content: labelContent,
          offset: labelOffset
        }
      });
      marker.setMap(map);
      var labelContent = "<span>2</span>";
      var labelOffset = new AMap.Pixel(8, 7);
      var marker2 = new AMap.Marker({
        icon: icon,
        anchor: "center", //設置錨點
        position: [116.321354, 39.896436],
        offset: new AMap.Pixel(-10, -28),
        title: 2,
        clickable: true,
        bubble: true,
        label: {
          content: labelContent,
          offset: labelOffset
        }
      });
      marker2.setMap(map);
　　　　// 事件
      AMap.event.addListener(marker, "click", function(e) {
        debugger;
        //獲得的數據
      });
      AMap.event.addListener(marker2, "click", function(e) {
        debugger;
        //獲得的數據
      }); 
// 繪製路線
      map.plugin("AMap.TruckDriving", function() {
        var truckDriving = new AMap.TruckDriving({
          map: map,
          policy: 0, // 規劃策略
          size: 1, // 車型大小
          width: 2.5, // 寬度
          height: 2, // 高度
          load: 1, // 載重
          weight: 12, // 自重
          axlesNum: 2, // 軸數
          province: "京", // 車輛牌照省份
          isOutline: true,
          outlineColor: "#ffeeee",
          hideMarkers: true
        });
        var path = [];
        path.push({ lnglat: [116.303843, 39.983412] }); //起點
        path.push({ lnglat: [116.321354, 39.896436] }); //途徑
        path.push({ lnglat: [116.407012, 39.992093] }); //終點

        truckDriving.search(path, function(status, result) {
          // searchResult便是對應的駕車導航信息，相關數據結構文檔請參考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === "complete") {
            log.success("獲取貨車規劃數據成功");
          } else {
            log.error("獲取貨車規劃數據失敗：" + result);
          }
        });
      });
    });
  },
  methods: {}
};
</script>
<style>
.amap-marker-label {
  border: 0px;
  background: rgba(255, 255, 255, 0);
  color: #fff;
  font-size: 17px;
  font-weight: 550;
  text-align: center;
}
</style>

NPM 方式webpack

npm install vue-amap --saveweb

配置main.jsnpm

import VueAMap from 'vue-amap'
// 初始化vue-amap
VueAMap.initAMapApiLoader({
  key: '您申請的key值',
  plugin: [
    'AMap.Autocomplete', // 輸入提示插件
    'AMap.PlaceSearch', // POI搜索插件
    'AMap.Scale', // 右下角縮略圖插件 比例尺
    'AMap.OverView', // 地圖鷹眼插件
    'AMap.ToolBar', // 地圖工具條
    'AMap.MapType', // 類別切換控件，實現默認圖層與衛星圖、實施交通圖層之間切換的控制
    'AMap.PolyEditor', // 編輯 折線多，邊形
    'AMap.CircleEditor', // 圓形編輯器插件
    'AMap.Geolocation', // 定位控件，用來獲取和展現用戶主機所在的經緯度位置
    'AMap.TruckDriving' // 路徑規劃
  ],
  v: '1.4.13'
})
Vue.use(VueAMap)

頁面實現api

<template>
  <div class="amap-page-container">
    <el-amap
      :plugin="plugin"
      :amap-manager="amapManager"
      :zoom="zoom"
      :center="center"
      vid="amapDemo"
      ref="reds"
      style="width:100vw;height:80vh"
      :events="events"
    ></el-amap>
  </div>
</template>

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
var map = amapManager.getMap();
export default {
  data() {
    let _obj = this;
    return {
      amapManager,
      center: [116.303843, 39.983412],
      plugin: [
        {
          pName: "Scale",
          events: {
            init(instance) {
              console.log(instance);
            }
          }
        }
      ],
      zoom: 12,
      events: {
        init(o) {
          _obj.createMap();
        }
      }
    };
  },
  created() {
    // 配置
  },
  mounted() {},
  methods: {
    createMap() {
　　　　
      let o = amapManager.getMap();

      var icon = new AMap.Icon({
        // 圖標尺寸
        size: new AMap.Size(32, 46),
        // 圖標的取圖地址
        image:
          "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
        // 圖標所用圖片大小
        imageSize: new AMap.Size(32, 46)
      });
      var labelContent = "<span>1</span>";
      var labelOffset = new AMap.Pixel(8, 7);
      var marker = new AMap.Marker({
        icon: icon,
        position: [116.303843, 39.983412],
        offset: new AMap.Pixel(-10, -46),
        title: 1,
        text: 1,
        label: {
          content: labelContent,
          offset: labelOffset
        }
      });
      marker.setMap(o);
      var labelContent = "<span>2</span>";
      var labelOffset = new AMap.Pixel(8, 7);
      var marker2 = new AMap.Marker({
        icon: icon,
        anchor: "center", //設置錨點
        position: [116.321354, 39.896436],
        offset: new AMap.Pixel(-10, -28),
        title: 2,
        clickable: true,
        bubble: true,
        label: {
          content: labelContent,
          offset: labelOffset
        }
      });
      marker2.setMap(o);

      var truckDriving = new AMap.TruckDriving({
        map: o,
        policy: 0, // 規劃策略
        size: 1, // 車型大小
        width: 2.5, // 寬度
        height: 2, // 高度
        load: 1, // 載重
        weight: 12, // 自重
        axlesNum: 2, // 軸數
        province: "京", // 車輛牌照省份
        isOutline: true,
        outlineColor: "#ffeeee",
        hideMarkers: true
      });

      var path = [];
      path.push({ lnglat: [116.303843, 39.983412] }); //起點
      path.push({ lnglat: [116.321354, 39.896436] }); //途徑
      path.push({ lnglat: [116.407012, 39.992093] }); //終點

      truckDriving.search(path, function(status, result) {
        if (status === "complete") {
          console.log("獲取貨車規劃數據成功");
        } else {
          console.log("獲取貨車規劃數據失敗：" + result);
        }
        // searchResult便是對應的駕車導航信息，相關數據結構文檔請參考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      });
      AMap.event.addListener(marker, "click", function(e) {
        debugger;
        //獲得的數據
      });
      AMap.event.addListener(marker2, "click", function(e) {
        debugger;
        //獲得的數據
      });
    }
  }
};
</script>
<style>
.amap-marker-label {
  border: 0px;
  background: rgba(255, 255, 255, 0);
  color: #fff;
  font-size: 17px;
  font-weight: 550;
  text-align: center;
}
</style>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程