vue 高德地图api爬坑之路（一）初始化

由于使用vue-amap插件有点问题，所以使用了原生高德地图api。

集成：

public/index.html 添加

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=6edcabf26de83ce1024f843dcb8d3617"></script>

vue.config.js 添加高德地图配置

configureWebpack: {externals: {'AMap': 'AMap' // 高德地图配置}},

vue 代码（初步实现添加marker及点击弹出详情示例）

<template><div style="height:500px;width:500px"><div style="height:100%;width:100%" id="container" width tabindex="0"></div></div>
</template><script>
import AMap from 'AMap'
export default {name: 'mapDetail',data () {return {map: undefined,markerList:[],}},mounted () {this.init();this.addMarker();},methods: {//初始化map对象init: function () {let map = new AMap.Map('container', {center: [116.397428, 39.90923],resizeEnable: true,zoom: 15,lang: 'cn'})AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {map.addControl(new AMap.ToolBar())map.addControl(new AMap.Scale())});this.map = map;},//打开marker消息窗体openInfo(positionResult,pointData) {var info = [];info.push("<div class='input-card content-window-card'>");info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");let infoWindow = new AMap.InfoWindow({content: info.join(""),offset: new AMap.Pixel(10, -25)});infoWindow.open(this.map, positionResult.lnglat);},//添加markeraddMarker(){let that = this;var marker = new AMap.Marker({position: new AMap.LngLat(116.397428,39.90923), title: '北京',extData: {id:'123456'}});//绑定点击事件marker.on('click',positionResult => {console.log(positionResult);let pointData = positionResult.target.getExtData();that.openInfo( positionResult ,pointData);});this.markerList.push(marker);this.map.add(this.markerList);},},
}
</script><style>
.custom-content-marker {position: relative;width: 25px;height: 34px;
}.custom-content-marker img {width: 100%;height: 100%;
}
</style>

vue 高德地图api爬坑之路（一）初始化相关推荐

vue 高德地图api爬坑之路（三）Autocomplete 和 PlaceSearch
添加页面控件 <div class="search-div" ><el-input id="tipInput" v-model="i ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
Vue+高德地图api
文章目录前言一.准备工作 1.申请应用 2.引入 3.创建地图二.使用高德地图 1.覆盖物 (1) 点标记 (2) 海量点标记 (3) 轨迹回放 2.矢量图形 (1) 多边形 3.图层 (1) ...
Vue+高德地图API的使用
浏览器搜索高德开放平台或者高德地图API 链接地址:https://lbs.amap.com/ 二.创建Vue项目 Vue2跟Vue3的差别不大,用哪个都可以使用npm 安装高德地图按 N ...
python 乡镇轮廓高德_Python调用高德地图API爬取经纬度
认识高德地图API 比起普通的静态网页爬虫,爬高德地图的麻烦之处在于API中存在参数.这需要我们首先要对高德地图API有个基本的了解. 登录高德地图API网站,点击"开发文档",找 ...
Vue+高德地图API的使用(插件的使用)
接上次地图显示官方文档:根据自己需求引入想要的插件在AMapLoader.load中的plugins引入你所需要的插件 //这里是我引入的插件 plugins: ["AMap.ToolB ...
Vue+高德地图API的使用(电子围栏)
页面绘制 <template><el-table :data="fencingData" border st ...
vue 高德地图API根据地址获取经纬度/根据经纬度获取地址
1.引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&am ...

vue 高德地图api爬坑之路（一）初始化

vue 高德地图api爬坑之路（一）初始化相关推荐

最新文章

热门文章