<fieldset id="i00k2"></fieldset>

<fieldset id="i00k2"></fieldset>

<del id="i00k2"></del>

使用高德地圖marker類中關于content圖片路徑問題

waruqi 發布于2019-08-22 18:45 / 1464人閱讀

摘要：不易于后期更換圖片標記二使用靜態資源廢話不多直接上代碼我們在項目文件夾下新建一個圖片，然后將所有的靜態資源都放入這個文件夾中，這樣打包的時候，依舊能找到圖片路徑，并且圖片是獨立打包稱文件夾。

高德Marker 類中有關于icon 圖片的使用，現有兩種方式可以實現

一.使用import 導入

在組件中直接import svg from "demo/run.svg"
然后再初始化Marker標記的時候

 let marker = new AMap.Marker({
      position: new AMap.LngLat(item.LONGITUDE, item.LATITUDE),
      title: item.ADDRESS,
      offset: new AMap.Pixel(-10, -10),
      icon: svg
    });

在icon導入svg就可以了，這是第一種方式，可以實現marker類標記圖片

但是這種方式存在一個缺點即圖片在build后會以base64形式被打包到js文件中。不易于后期更換圖片標記;

二.使用靜態資源

--廢話不多直接上代碼

  let marker = new AMap.Marker({
          position: new AMap.LngLat(item.LONGITUDE, item.LATITUDE),
          title: item.ADDRESS,
          offset: new AMap.Pixel(-10, -10),
          icon: "static/img/running.svg"
        });

我們在項目static文件夾下新建一個img圖片，然后將所有的靜態資源都放入這個文件夾中，這樣打包的時候，依舊能找到圖片路徑，并且圖片是獨立打包稱文件夾。不過這種方式需要配置webpack才行，方法可以看我這篇文章;

總結

個人推薦方法二，這種方式更易于圖片更換以及后期維護，而方法一如有更改必須每次打包項目才行;

GPU云服務器云服務器 java圖片路徑問題 php中關于的運算百度地圖map_marker 高德地圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96172.html

高德地圖 Javascript API 入門（四）

摘要：高德地圖入門四地圖覆蓋物覆蓋物類名說明是否插件點標記否覆蓋物點標記復雜點標記對象，對普通點標記的擴展否覆蓋物折線否覆蓋物多邊形否覆蓋物圓否圖片覆蓋物否地圖右鍵菜單否點標記預覽自定義點標記預覽多邊形預覽右鍵菜單添加右鍵菜單內容項放大縮小添加高德地圖 Javascript API 入門（四）地圖覆蓋物覆蓋物類名說明是否插件 AMap.Marker 點標記否 AM...

AlanKeene 2019-08-20 14:29 評論0 收藏0
VUE 記一次高德地圖和Echarts（中國地圖）

摘要：效果圖準備工作高德地圖申請安裝中國地圖高德地圖官方點我進入創建動態創建標簽后的是需要的插件中國地圖安裝開始使用創建組件寫入需要的分布指數高低寫入高德地圖需要的效果圖 showImg(https://user-gold-cdn.xitu.io/2019/5/24/16ae7a7f2f9cac45); 準備工作高德地圖申請key 安裝Echarts 中國地圖高德地圖官方API...

KoreyLee 2019-05-27 17:42 評論0 收藏0
Vue.js 中使用高德地圖定位及渲染地圖

摘要：看了上面有集成的高德地圖組件，但由于項目所要用到的不多，所以決定跟著文檔寫一寫運行環境是引入高德地圖一般用使用最簡單粗暴的引入地圖的方法就是，在入口的頭部直接引入，記得一定要帶上如果沒有的話去高德地圖的官網申請一個。看了github上面有集成的高德地圖組件，但由于項目所要用到的不多，所以決定跟著文檔寫一寫.運行環境是vue-cli webpack 引入高德地圖一般用使用vue-cl...

Ku_Andrew 2019-08-21 17:58 評論0 收藏0