vue在线地图使用百度地图

引入百度地图api

在index.html中引用

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

在组件中展示地图

<template>

<div id="map"></div>

</template>

<script>

export default {

data() {

return {}

},

methods: {

initMap() {

var map = new BMap.Map('map',{minZoom: 10, maxZoom: 19}) //初始化地图并设置最小与最大层级

var point = new BMap.Point(116.403927, 39.913268) // 此处根据坐标点传入

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

map.disableInertialDragging();

map.centerAndZoom(point, 17)//中心点和地图级别

this.fangfa(map, point, 116.403927, 39.913268);

},

//此方法为设置设备辐射范围（所有参数可根据实际情况设置）

fangfa(map, point, lat, lng) {

function Sector1(point2, radius, sDegree, eDegree, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) {

var points = [];

var step = ((eDegree - sDegree) / 30) || 30;

points.push(point2);

for (var i = sDegree; i < eDegree + 0.01; i += step) {

points.push(EOffsetBearing(point2, radius, i));

}

points.push(point2);

var polygon = new BMap.Polygon(points, { strokeColor: strokeColour, strokeWeight: strokeWeight, strokeOpacity: Strokepacity, fillColor: fillColour, fillOpacity: fillOpacity });//远点扇形绘制

return polygon;

}

function Sector2(point2, radius, sDegree, eDegree, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) {

var points = [];

var step = ((eDegree - sDegree) / 30) || 30;

points.push(point2);

for (var i = sDegree; i < eDegree + 0.01; i += step) {

points.push(EOffsetBearing(point2, radius, i));

}

points.push(point2);

var polygon = new BMap.Polygon(points, { strokeColor: strokeColour, strokeWeight: strokeWeight, strokeOpacity: Strokepacity, fillColor: fillColour, fillOpacity: fillOpacity });//近点扇形绘制

return polygon;

}

function EOffsetBearing(point3, dist, bearing) {

var latConv = map.getDistance(point3, new BMap.Point(point3.lng + 0.1, point3.lat)) * 17;

var lngConv = map.getDistance(point3, new BMap.Point(point3.lng, point3.lat + 0.1)) * 10;

var lat = dist * Math.cos(bearing * Math.PI / 180) / latConv;

var lng = dist * Math.sin(bearing * Math.PI / 180) / lngConv;

return new BMap.Point(point3.lng + lng, point3.lat + lat);

}

var points = new BMap.Point(lat, lng);

console.log(points)

var polygon2 = Sector1(points, 200, 25, 100, "#00FCFC", 1, 0.4, "#00FCFC", 0.4);

var polygon3 = Sector2(points, 80, 25, 100, "#000", 0.5, 0.4, "#000", 0.6);

map.addOverlay(polygon2);

map.addOverlay(polygon3);

let imgUrl = require('@/assets/image/camera/camera.png');

var marker = new BMap.Marker(point, { icon: new BMap.Icon(imgUrl, new BMap.Size(22, 19)) });

map.addOverlay(marker);

},

},

mounted() {

this.initMap()

},

}

</script>

<style lang="scss" scoped>

#map {

width: 800px;

height: 500px;

}

</style>