百度地图api

方式一

注册账号密码，拿到ak
将html的demo改造成vue格式
BMapGL of undefined报错：vue中需要用window.xxx来处理

  var map = new BMapGL.Map("baidumap"); // 创建Map实例var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标以上改为----》var map = new window.BMapGL.Map("baidumap"); // 创建Map实例var point = new window.BMapGL.Point(116.404, 39.915); // 创建点坐标
}

Map of undefined报错：接口地址问题、地图没有高度

接口地址：-------api改为getscript
https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=换为自己的
地图容器赋予高度
height：100% 按需改掉,比如:height:80vw

自定义图标。图标一片漆黑错误：setImageSize方法没写。图标不显示错误：setImageSize方法值不是对象。完整写法

let myIcon = new BMap.Icon("图片地址",new BMap.Size(60, 60) //图标可视区大小
);
//设置图标大小。注意：值必须为new的大小（不写导致图标漆黑，写错导致图标不展示）
myIcon.setImageSize(new BMap.Size(60, 60));

自定义信息窗口。通过InfoBox，具体看文档demo（这种信息窗口可随意加css样式）

1、将文档demo中的js代码拷贝引入vue，不用import，要等地图api的js文件加载完后再引入（此js代码可用于处理关闭信息窗口的事件）
2、BMapLib也要用window.BMapLib
3、InfoBox中的boxStyle中设置有背景图片，所以在样式中自己设置没有效果
4、将html部分包括样式，提出到单独的html文件中（因为在一个vue中代码太多，样式不好调试）
5、用axios异步导入html文件，打印一下res.data发现就是html全代码
6、注意：关闭按钮图片需要closeIconUrl设置，图片大小需要改动引入的js文件中的对应样式
7、最后带入到InfoBox中<template><div><div id="baidumap"></div></div>
</template><script>
let BMap = {};
let map = {};
import axios from "axios";
export default {data() {return {// map: {},point: {},};},mounted() {this.loadMainJScript(); // 异步加载地图// 定时器等，是副线程，要等主线程全部完成再开始执行。setTimeout(() => {this.addMarker();}, 2000);},methods: {loadMainJScript() {console.log("主函数加载完成");var script = document.createElement("script");script.type = "text/javascript";script.src ="https://api.map.baidu.com/getscript?v=3.0&ak=mB4WGpYi4lnUliCGurcCU0mW0EBjlILG";script.onload = () => {this.loadinfoBoxJScript();};document.body.appendChild(script);},loadinfoBoxJScript() {console.log("信息窗口函数加载完成");var script = document.createElement("script");script.type = "text/javascript";script.src = "/infoBox.js";  //这个就是demo中的js文件拷贝到本地的引入script.onload = () => {this.init();};document.body.appendChild(script);},init() {console.log("地图加载完成");// 因为新建对象 BMap必须要用window.才行，这里定义为全局变量统一赋值BMap = window.BMap;map = new BMap.Map("baidumap");this.point = new BMap.Point(116.404, 39.915);map.centerAndZoom(this.point, 15);map.enableScrollWheelZoom(); // 启用滚轮放大缩小},addMarker() {console.log("覆盖点加载完成");// 创建自定义图标let myIcon = new BMap.Icon("https://pic.baike.soso.com/ugc/baikepic2/2356/ori-20190510154707-1915134820_jpeg_1280_1920_208404.jpg/0",new BMap.Size(60, 60));myIcon.setImageSize(new BMap.Size(60, 60));// 创建Marker标注，使用小车图标let marker = new BMap.Marker(this.point, {icon: myIcon,});// 添加覆盖物  点map.addOverlay(marker);// 自定义弹出信息窗口//注释内容：window.BMapLib.InfoBox中需要通过join将数组转为html文件。//现在把html文件和样式剔除出去，再用axios异步引入，方便调试样式// var html = [//   "<div class='infoBoxContent'><div class='title'><strong>中海雅园</strong><span class='price'>均价43000</span></div>",//   "<div class='list'><ul><li><div class='left'><img src='house3.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园南北通透四居室</a><p>4室2厅，205.00平米，3层</p></div><div class='rmb'>760万</div></li>",//   "<li><div class='left'><img src='house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>中海雅园四居室还带保姆间</a><p>2室1厅，112.00平米，16层</p></div><div class='rmb'>300万</div></li>",//   "<li><div class='left'><img src='house2.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>《有钥匙 随时看》花园水系</a><p>3室2厅，241.00平米，16层</p></div><div class='rmb'>400万</div></li>",//   "<li><div class='left'><img src='house3.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城D区正规楼王大三居</a><p>3室3厅，241.00平米，17层</p></div><div class='rmb'>600万</div></li>",//   "<li class='last'><div class='left'><img src='house1.jpg'/></div><div class='left'><a target='_blank' href='http://map.baidu.com'>富力城豪，身份人士的象征</a><p>4室2厅，213.90平米，25层</p></div><div class='rmb'>700万</div></li>",//   "</ul></div>",//   "</div>",// ];//点击图标弹出信息窗口marker.addEventListener("click", () => {axios.get("/template.html").then((res) => {console.log(res.data);var infoBox = new window.BMapLib.InfoBox(map, res.data, {boxStyle: {background: "#fff",width: "270px",height: "300px",},closeIconUrl:'/link.jpg',  //指定关闭图片。但是图片大小必须到js文件中自行设置closeIconMargin: "1px 1px 0 0",enableAutoPan: true,align: window.INFOBOX_AT_TOP,});infoBox.open(marker);});});},},
};
</script><style lang="scss" scoped>
#baidumap {overflow: hidden;width: 90vw;height: 60vh;margin: 0;font-family: "微软雅黑";
}
</style>

方式二

vue-baidu-map 安装使用，具体看github

主体文档

地图属性。通过map.xxx设置（地图能否缩放、中心点、建筑文字图标显示与否等等）
地图控件。通过BMapGL.xxx设置（地图缩放键、定位键、3D键等）
覆盖物。通过BMapGL.Marker设置（地图覆盖的点、线、图标等）
自定义点覆盖物。图片需要放在public中，再用/xxx 选中图片(图片放在public并使用其中路径才能读取成功，原理暂时不动)
信息窗口。点击点覆盖物弹出的窗口

高德地图api

与百度地图一样方式引入（不用改api地址，依旧需要加window.地图）
覆盖物添加事件。不能用marker.addEventListener，也用不了官网文档的marker.on/off

window.AMap.event.addListener(marker, "click", () => console.log(1));

自定义信息窗口。不需要引入js文件，直接拷贝案例代码再修改。再通过axios异步导入html文件，然后渲染为信息窗口。
问题1：异步导入html文件后，用nexttick操作dom节点获取不到？
问题2：异步导入html中给dom节点添加的事件，在vue中失效了？

     window.AMap.event.addListener(marker, "click", () => {console.log("信息窗口创建成功");//异步获取自己的个性化信息窗口axios.get("/template.html").then((res) => {let infoWindow = new window.AMap.InfoWindow({isCustom: true, //使用自定义窗体content: res.data,offset: new window.AMap.Pixel(16, -45), //相对于大图的偏移量});//信息窗口顺利打开infoWindow.open(map, marker.getPosition());// 利用nextTick()节点更新后执行。但是这里第一次获取不到数据，第二次获取节点正常//   this.$nextTick(() => {//     let dom = document.querySelector(".title").innerHTML;//     console.log(dom);//   });});});

vue使用地图api相关推荐

利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
Vue+高德地图api
文章目录前言一.准备工作 1.申请应用 2.引入 3.创建地图二.使用高德地图 1.覆盖物 (1) 点标记 (2) 海量点标记 (3) 轨迹回放 2.矢量图形 (1) 多边形 3.图层 (1) ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
vue 高德地图api爬坑之路（一）初始化
由于使用vue-amap插件有点问题,所以使用了原生高德地图api. 集成: public/index.html 添加 <script type="text/javascript&qu ...
Vue+高德地图API的使用
浏览器搜索高德开放平台或者高德地图API 链接地址:https://lbs.amap.com/ 二.创建Vue项目 Vue2跟Vue3的差别不大,用哪个都可以使用npm 安装高德地图按 N ...
Vue 百度地图API实现定位用户位置功能
一.进入百度地图百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com) 1.1注册登录 1.2进入控制台应用管理->我的应用->创建应用 1.3创建应用填 ...
vue百度地图API、获取当前经纬度以及地理位置
百度API的使用一.创建MAP实例 var self = thiswindow.map = new BMap.Map(this.$refs.allmap); // 创建Map实例window.geo ...
Vue+高德地图API的使用(插件的使用)
接上次地图显示官方文档:根据自己需求引入想要的插件在AMapLoader.load中的plugins引入你所需要的插件 //这里是我引入的插件 plugins: ["AMap.ToolB ...
Vue+高德地图API的使用(电子围栏)
页面绘制 <template><el-table :data="fencingData" border st ...

vue使用地图api

vue使用地图api

百度地图api

方式一

方式二

主体文档

高德地图api

vue使用地图api相关推荐

最新文章

热门文章