1500字范文 > 百度地图的使用方法及vue中调用

百度地图的使用方法及vue中调用

时间：2019-11-15 12:21:11

相关推荐

百度地图的使用方法及vue中调用

1.百度地图的注册使用密钥

点开下面连接进行注册然后

登录百度账号/?qq-pf-to=pcqq.group点开控制台进入我的应用

创建后会有个密钥（AK）这个引入地图是要用

3.页面引入

<script type="text/javascript" src="http://api./api?v=2.0&ak=你的密钥"></script>

4.创建一个盛放地图的容器（容器要设置大小不然地图出不来）

<body><div id="container"></div></body>

5.实例化地图和添加控件

6.效果图

绘制点线面：

<div id="container"></div><script>var map = new BMapGL.Map("container");// 创建地图实例var point = new BMapGL.Point(113.6648, 34.7835);// 创建点坐标map.centerAndZoom(point, 17);// 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放// 添加点var marker = new BMapGL.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中// 记录点的数组var lineArr = [];// 记录上一个var last = null;// 添加事件map.addEventListener("click", e => {// 有上一个就移除上一个last ? map.removeOverlay(last) : '';// console.log(e);// 获取单击点的位置（经度，纬度）var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);// 添加到数组组件lineArr.push(p);// 创建一个标记var m = new BMapGL.Marker(p);// 重新定义上一个last = m;// 显示标记map.addOverlay(m);})// 双击事件map.addEventListener("dblclick", () => {// 移除最后点map.removeOverlay(last);// 多边线 strokeColor颜色 strokeWeight线粗细 strokeOpacity 线的透明度// var polyline = new BMapGL.Polyline(lineArr, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });// map.addOverlay(polyline);var polygon = new BMapGL.Polygon(lineArr, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "red" });map.addOverlay(polygon);lineArr = [];})// 地图控件var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件map.addControl(cityCtrl);</script>

图面效果如下图，可双击选定区域

信息窗口

最介绍在vue中引入百度地图

在index里面导入

<script type="text/javascript" src="http://api./api?v=2.0&ak=你的密钥"></script>

创建容器

<template><div class="about"><h1>This is an about page</h1><div id="container" ref="dom"></div></div></template>

实例化地图

<template><div class="about"><h1>This is an about page</h1><div id="container" ref="dom"></div></div></template><style>#container {width: 800px;height: 600px;}</style><script setup>import {ref,onMounted} from 'vue'// 申明dom引用对象const dom = ref();// 声明map地图let map;// 挂载完毕后创建地图的实例onMounted(() => {map = new window.BMapGL.Map(dom.value);// 创建地图实例var point = new window.BMapGL.Point(118.5,27.5);// 创建点坐标map.centerAndZoom(point,15);// 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.setMapType(window.BMAP_EARTH_MAP); // 设置地图类型为地球模式})</script>

效果图如下

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。