vue使用地图api

最新推荐文章于 2024-03-29 15:24:51 发布

嘿起屁儿整

最新推荐文章于 2024-03-29 15:24:51 发布

阅读量317

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43847807/article/details/113772698

版权

前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

vue使用地图api

百度地图api
高德地图api

百度地图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);
        //   });
        });
      });

嘿起屁儿整

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue使用地图api

vue使用地图api百度地图api方式一方式二解析文档高德地图api百度地图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 =
复制链接

扫一扫