在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示
2024-05-09 05:57:57
文章目录
- 1、在vue中引入百度地图的script
- 2、生成想要的地图样式
- 3、生成地图
- 4、创建3d棱柱
- 5、设置标记点和提示框
- 6、代码总结
1、在vue中引入百度地图的script
- 在public/index中引入
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你自己的key"></script>
- ak的获取
1、先进入百度地图api的网页，点击控制台
2、创建自己的应用，就可以获得AK
2、生成想要的地图样式
1、点击这里的超链接 自定义地图样式编辑器
或者 按照如下步骤
2、点击新建就可以创建地图，按照自己的想法编辑完成后，下载json文件（在右下角）
- 注 因为我自己没有搭建后台，所以直接转换成js文件 import进vue中
3、生成地图
- 这里记得设置地图的大小 不然没有显示
<template><div class="drawer"><div id="allmap" style="width: 100%; height: 700px"></div></div>
</template><script>
import mapstyle from "./mapstyle.js";
export default {props: {},data() {return {mapstyle: [],};},mounted() {this.getstyle();this.mapInit();},methods: {// 获取地图样式getstyle() {this.mapstyle = mapstyle;},// 获取标记点信息getLocationInfo() {this.LocationInfo = LocationInfo;},mapInit() {this.map = new BMapGL.Map("allmap");var map = new BMapGL.Map("allmap");var point = new BMapGL.Point(114.42586, 23.129122); //中心点经纬度map.centerAndZoom(point, 10);map.setTilt(60);//倾斜角map.enableScrollWheelZoom();map.setMapStyleV2({ styleJson: this.mapstyle });},},
};
</script>
<style scoped>
</style>
4、创建3d棱柱
- 这里的能建立3D棱柱的最小单位只能是县区以上，乡镇并不能创建3d棱柱
var bd = new BMapGL.Boundary();// 给某一个省 市 县 设置3d棱柱bd.get("惠城区", function (rs) {var count = rs.boundaries.length; //行政区域的点有多少个var pointArray = [];for (var i = 0; i < count; i++) {var path = [];var str = rs.boundaries[i].replace(" ", "");var points = str.split(";");for (var j = 0; j < points.length; j++) {var lng = points[j].split(",")[0];var lat = points[j].split(",")[1];path.push(new BMapGL.Point(lng, lat));}var prism = new BMapGL.Prism(path, 5000, {topFillColor: "#5679ea",topFillOpacity: 0.5,sideFillColor: "#5679ea",sideFillOpacity: 0.9,});map.addOverlay(prism);}});
5、设置标记点和提示框
var marker = new Array();var sContent = new Array();var infoWindow = new Array();var label = new Array();for (let i in this.LocationInfo) {// 创建添加点标记marker[i] = new BMapGL.Marker(new BMapGL.Point(this.LocationInfo[i].positionx,this.LocationInfo[i].positiony));map.addOverlay(marker[i]);sContent[i] ='<div><img width="200" object-fit: fill src=' +this.LocationInfo[i].img +"><p>" +this.LocationInfo[i].content +"</p></div>";infoWindow[i] = new BMapGL.InfoWindow(sContent[i]);label[i] = new BMapGL.Label(this.LocationInfo[i].name, {offset: new BMapGL.Size(-20, 0),});label[i].setStyle({ color : "#fff", fontSize : "14px", backgroundColor :"0.05",backgroundColor:"#3e5697",border :"0", fontWeight :"bold" });marker[i].setLabel(label[i]);// marker添加点击事件marker[i].addEventListener("click", function (evt) {// 创建图文信息窗口this.openInfoWindow(infoWindow[i]);});}
- 我的标记点数据样例
6、代码总结
- baidu.vue
<template><div class="drawer"><div id="allmap" style="width: 100%; height: 700px"></div></div>
</template><script>
import mapstyle from "./mapstyle.js";
import LocationInfo from "./baiduinfo";
export default {props: {},data() {return {mapstyle: [],LocationInfo: [],};},mounted() {this.getstyle();this.getLocationInfo();this.mapInit();},methods: {// 获取地图样式getstyle() {this.mapstyle = mapstyle;},// 获取标记点信息getLocationInfo() {this.LocationInfo = LocationInfo;},mapInit() {this.map = new BMapGL.Map("allmap");var map = new BMapGL.Map("allmap");var point = new BMapGL.Point(114.42586, 23.129122); //中心点经纬度map.centerAndZoom(point, 10);map.setTilt(60);//倾斜角map.enableScrollWheelZoom();map.setMapStyleV2({ styleJson: this.mapstyle });var bd = new BMapGL.Boundary();// 给某一个省 市 县 设置3d棱柱bd.get("惠城区", function (rs) {var count = rs.boundaries.length; //行政区域的点有多少个var pointArray = [];for (var i = 0; i < count; i++) {var path = [];var str = rs.boundaries[i].replace(" ", "");var points = str.split(";");for (var j = 0; j < points.length; j++) {var lng = points[j].split(",")[0];var lat = points[j].split(",")[1];path.push(new BMapGL.Point(lng, lat));}var prism = new BMapGL.Prism(path, 5000, {topFillColor: "#5679ea",topFillOpacity: 0.5,sideFillColor: "#5679ea",sideFillOpacity: 0.9,});map.addOverlay(prism);}});var marker = new Array();var sContent = new Array();var infoWindow = new Array();var label = new Array();for (let i in this.LocationInfo) {// 创建添加点标记marker[i] = new BMapGL.Marker(new BMapGL.Point(this.LocationInfo[i].positionx,this.LocationInfo[i].positiony));map.addOverlay(marker[i]);sContent[i] ='<div><img width="200" object-fit: fill src=' +this.LocationInfo[i].img +"><p>" +this.LocationInfo[i].content +"</p></div>";infoWindow[i] = new BMapGL.InfoWindow(sContent[i]);label[i] = new BMapGL.Label(this.LocationInfo[i].name, {offset: new BMapGL.Size(-20, 0),});label[i].setStyle({ color : "#fff", fontSize : "14px", backgroundColor :"0.05",backgroundColor:"#3e5697",border :"0", fontWeight :"bold" });marker[i].setLabel(label[i]);// marker添加点击事件marker[i].addEventListener("click", function (evt) {// 创建图文信息窗口this.openInfoWindow(infoWindow[i]);});}},},
};
</script><style scoped>
</style>
- baiduinfo.js
let LocationInfo = [{"id":1,"name":"桥东街道","positionx":"114.426373","positiony":"23.0908993","content":"这里是桥东街道","img":"https://img0.baidu.com/it/u=3901965293,3444868679&fm=26&fmt=auto"
},{"id":2,"name":"桥西街道","positionx":"114.417599","positiony":"23.079812","content":"这里是桥西街道","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":3,"name":"江南街道","positionx":"114.396562","positiony":"23.110197","content":"这里是江南街道","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":4,"name":"江北街道","positionx":"114.420806","positiony":"23.115994","content":"这里是江北街道","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":5,"name":"龙丰街道","positionx":"114.401526","positiony":"23.063567","content":"这里是龙丰街道","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":6,"name":"河南岸街道","positionx":"114.426138","positiony":"23.079581","content":"这里是河南岸街道","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":7,"name":"惠环街道","positionx":"114.346629","positiony":"23.015378","content":"这里是惠环街道","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":8,"name":"陈江街道","positionx":"114.32508","positiony":"23.013933","content":"这里是陈江街道","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":9,"name":"桥东街道","positionx":"114.471748","positiony":"23.111505","content":"这里是水口街道","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":10,"name":"小金口街道","positionx":"114.42623","positiony":"23.176139","content":"这里是小金口街道","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":11,"name":"汝湖镇","positionx":"114.465195","positiony":"23.183424","content":"这里是汝湖镇","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":12,"name":"三栋镇","positionx":"114.455009","positiony":"22.997408","content":"这里是三栋镇","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":13,"name":"沥林镇","positionx":"114.244869","positiony":"22.982499","content":"这里是沥林镇","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":14,"name":"潼湖镇","positionx":"114.203076","positiony":"23.088502","content":"这里是潼湖镇","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":15,"name":"马安镇","positionx":"114.48847","positiony":"23.069326","content":"这里是马安镇","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":16,"name":"横沥镇","positionx":"114.621393","positiony":"23.162301","content":"这里是横沥镇","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":17,"name":"芦洲镇","positionx":"114.530738","positiony":"23.371823","content":"这里是芦洲镇","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
},{"id":18,"name":"潼侨镇","positionx":"114.306894","positiony":"23.040896","content":"这里是潼侨镇","img":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.365zhaosheng.com%2Fupload%2Fuserimg%2F20120619121544592.jpg&refer=http%3A%2F%2Fwww.365zhaosheng.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642422612&t=f3c6aa688cc354416d34eb60d1aafab1"
}]
module.exports = LocationInfo- mapstyle.js
var styleJson = [{"featureType": "land","elementType": "geometry","stylers": {"color": "#242f3eff"}
}, {"featureType": "manmade","elementType": "geometry","stylers": {"color": "#242f3eff"}
}, {"featureType": "water","elementType": "geometry","stylers": {"color": "#17263cff"}
}, {"featureType": "road","elementType": "geometry.fill","stylers": {"color": "#9e7d60ff"}
}, {"featureType": "road","elementType": "geometry.stroke","stylers": {"color": "#554631ff"}
}, {"featureType": "districtlabel","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "districtlabel","elementType": "labels.text.stroke","stylers": {"color": "#17263cff","weight": 3}
}, {"featureType": "poilabel","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "poilabel","elementType": "labels.text.stroke","stylers": {"color": "#17263cff","weight": 3}
}, {"featureType": "subway","elementType": "geometry","stylers": {"visibility": "off"}
}, {"featureType": "railway","elementType": "geometry","stylers": {"visibility": "off"}
}, {"featureType": "poilabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "subwaylabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "subwaylabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "tertiarywaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "tertiarywaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "provincialwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "provincialwaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "nationalwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "nationalwaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "highwaysign","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "highwaysign","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "green","elementType": "geometry","stylers": {"color": "#263b3eff"}
}, {"featureType": "nationalwaysign","elementType": "labels.text.fill","stylers": {"color": "#d0021bff"}
}, {"featureType": "nationalwaysign","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}
}, {"featureType": "city","elementType": "labels","stylers": {"visibility": "on"}
}, {"featureType": "city","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "city","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "city","elementType": "labels.text.stroke","stylers": {"color": "#17263cff"}
}, {"featureType": "water","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "water","elementType": "labels.text.stroke","stylers": {"color": "#242f3eff"}
}, {"featureType": "local","elementType": "geometry.fill","stylers": {"color": "#38414eff"}
}, {"featureType": "local","elementType": "geometry.stroke","stylers": {"color": "#ffffff00"}
}, {"featureType": "fourlevelway","elementType": "geometry.fill","stylers": {"color": "#38414eff"}
}, {"featureType": "fourlevelway","elementType": "geometry.stroke","stylers": {"color": "#ffffff00"}
}, {"featureType": "tertiaryway","elementType": "geometry.fill","stylers": {"color": "#38414eff"}
}, {"featureType": "tertiaryway","elementType": "geometry.stroke","stylers": {"color": "#ffffff00"}
}, {"featureType": "tertiaryway","elementType": "labels.text.fill","stylers": {"color": "#759879ff"}
}, {"featureType": "fourlevelway","elementType": "labels.text.fill","stylers": {"color": "#759879ff"}
}, {"featureType": "highway","elementType": "labels.text.fill","stylers": {"color": "#759879ff"}
}, {"featureType": "highway","elementType": "geometry.fill","stylers": {"color": "#9e7d60ff"}
}, {"featureType": "highway","elementType": "geometry.stroke","stylers": {"color": "#554631ff"}
}, {"featureType": "provincialway","elementType": "geometry.fill","stylers": {"color": "#9e7d60ff"}
}, {"featureType": "provincialway","elementType": "geometry.stroke","stylers": {"color": "#554631ff"}
}, {"featureType": "tertiaryway","elementType": "labels.text.stroke","stylers": {"color": "#1a2e1cff"}
}, {"featureType": "fourlevelway","elementType": "labels.text.stroke","stylers": {"color": "#1a2e1cff"}
}, {"featureType": "highway","elementType": "labels.text.stroke","stylers": {"color": "#1a2e1cff"}
}, {"featureType": "nationalway","elementType": "labels.text.stroke","stylers": {"color": "#1a2e1cff"}
}, {"featureType": "nationalway","elementType": "labels.text.fill","stylers": {"color": "#759879ff"}
}, {"featureType": "nationalway","elementType": "geometry.fill","stylers": {"color": "#9e7d60ff"}
}, {"featureType": "nationalway","elementType": "geometry.stroke","stylers": {"color": "#554631ff"}
}, {"featureType": "cityhighway","elementType": "geometry.fill","stylers": {"color": "#9e7d60ff"}
}, {"featureType": "cityhighway","elementType": "geometry.stroke","stylers": {"color": "#554631ff"}
}, {"featureType": "arterial","elementType": "geometry.fill","stylers": {"color": "#9e7d60ff"}
}, {"featureType": "arterial","elementType": "geometry.stroke","stylers": {"color": "#554631fa"}
}, {"featureType": "medicallabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "medicallabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "entertainmentlabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "entertainmentlabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "estatelabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "estatelabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "businesstowerlabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "businesstowerlabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "companylabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "companylabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "governmentlabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "governmentlabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "restaurantlabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "restaurantlabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "hotellabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "hotellabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "shoppinglabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "shoppinglabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "lifeservicelabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "lifeservicelabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "carservicelabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "carservicelabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "financelabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "financelabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "otherlabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "otherlabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "airportlabel","elementType": "labels","stylers": {"visibility": "on"}
}, {"featureType": "airportlabel","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "airportlabel","elementType": "labels.text.stroke","stylers": {"color": "#17263cff"}
}, {"featureType": "airportlabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "6"}
}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "7"}
}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "8"}
}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "9"}
}, {"featureType": "highway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "10"}
}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "6"}
}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "7"}
}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "8"}
}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "9"}
}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "10"}
}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "6"}
}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "7"}
}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "8"}
}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "9"}
}, {"featureType": "nationalway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "10"}
}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "6"}
}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "7"}
}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "8"}
}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "9"}
}, {"featureType": "nationalway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "10"}
}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "6"}
}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "7"}
}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "8"}
}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "9"}
}, {"featureType": "nationalway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "10"}
}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "6"}
}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "7"}
}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "8"}
}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "9"}
}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "10"}
}, {"featureType": "provincialway","stylers": {"curZoomRegionId": "0","curZoomRegion": "8,9","level": "8"}
}, {"featureType": "provincialway","stylers": {"curZoomRegionId": "0","curZoomRegion": "8,9","level": "9"}
}, {"featureType": "provincialway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,9","level": "8"}
}, {"featureType": "provincialway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,9","level": "9"}
}, {"featureType": "provincialway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,9","level": "8"}
}, {"featureType": "provincialway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "8,9","level": "9"}
}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "6"}
}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "7"}
}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "8"}
}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "9"}
}, {"featureType": "cityhighway","stylers": {"curZoomRegionId": "0","curZoomRegion": "6,10","level": "10"}
}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "6"}
}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "7"}
}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "8"}
}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "9"}
}, {"featureType": "cityhighway","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "10"}
}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "6"}
}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "7"}
}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "8"}
}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "9"}
}, {"featureType": "cityhighway","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "6,10","level": "10"}
}, {"featureType": "arterial","stylers": {"curZoomRegionId": "0","curZoomRegion": "9,10","level": "9"}
}, {"featureType": "arterial","stylers": {"curZoomRegionId": "0","curZoomRegion": "9,10","level": "10"}
}, {"featureType": "arterial","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "9,10","level": "9"}
}, {"featureType": "arterial","elementType": "geometry","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "9,10","level": "10"}
}, {"featureType": "arterial","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "9,10","level": "9"}
}, {"featureType": "arterial","elementType": "labels","stylers": {"visibility": "off","curZoomRegionId": "0","curZoomRegion": "9,10","level": "10"}
}, {"featureType": "building","elementType": "geometry.topfill","stylers": {"color": "#2a3341ff"}
}, {"featureType": "building","elementType": "geometry.sidefill","stylers": {"color": "#313b4cff"}
}, {"featureType": "building","elementType": "geometry.stroke","stylers": {"color": "#1a212eff"}
}, {"featureType": "road","elementType": "labels.text.fill","stylers": {"color": "#759879ff"}
}, {"featureType": "road","elementType": "labels.text.stroke","stylers": {"color": "#1a2e1cff"}
}, {"featureType": "provincialway","elementType": "labels.text.fill","stylers": {"color": "#759879ff"}
}, {"featureType": "cityhighway","elementType": "labels.text.fill","stylers": {"color": "#759879ff"}
}, {"featureType": "arterial","elementType": "labels.text.fill","stylers": {"color": "#759879ff"}
}, {"featureType": "provincialway","elementType": "labels.text.stroke","stylers": {"color": "#1a2e1cff"}
}, {"featureType": "cityhighway","elementType": "labels.text.stroke","stylers": {"color": "#1a2e1cff"}
}, {"featureType": "arterial","elementType": "labels.text.stroke","stylers": {"color": "#1a2e1cff"}
}, {"featureType": "local","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "manmade","elementType": "labels.text.fill","stylers": {"color": "#d69563ff"}
}, {"featureType": "manmade","elementType": "labels.text.stroke","stylers": {"color": "#17263cff"}
}, {"featureType": "subwaystation","elementType": "geometry","stylers": {"visibility": "off"}
}, {"featureType": "transportationlabel","elementType": "labels.icon","stylers": {"visibility": "off"}
}, {"featureType": "transportationlabel","elementType": "labels","stylers": {"visibility": "off"}
}, {"featureType": "estate","elementType": "geometry","stylers": {"color": "#2a3341ff"}
}];module.exports = styleJson
在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示相关推荐
- vue中调用百度地图api
最近呢,由于工作需要,自己搭一个简单的h5应用给公司的客户,方便预约来访时间,然后写了小半年react-native的我,终于能写web了-(题外话题外话),然后我就欣然拿起久未使用的vue(好吧,还 ...
- vue中调用百度地图 获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度 拖动小红标 获取经纬度 关键词 查询获取经纬度 前期准备 ...
- Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...
- vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能 在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫 现在也是体会到了,学新的东西还是得看官方文档 ...
- vue中实现百度地图的引用（根据输入框输入内容获取详细地址）
vue中实现百度地图的引用(根据输入框输入内容获取详细地址) 代码内容参考:https://www.cnblogs.com/shuaifing/p/8185311.html 最终实现效果 第一步:在i ...
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- Vue中使用百度地图
安装 npm $ npm install vue-baidu-map --save cdn <script src="https://unpkg.com/vue-baidu-map&q ...
- VUE中使用百度地图BaiduMap
VUE中使用百度地图BaiduMap 以前在html页中使用了echart,做了很多图表,也集成了百度地图,效果很好.最近,开始研究vue加 .net core的框架,所以也想把echart和百度地图 ...
- react-native 接百度地图API（显示周边poi）
react-native 接百度地图API (显示周边poi) 目的:显示周边poi及搜索poi功能(给自己的笔记,省去了很多基础步骤,有问题的可以先去了解RN跟android以及Ios原生的通信) ...
最新文章
- Jzoj4747 被粉碎的线段树
- MPB：南农成艳芬组-瘤胃厌氧真菌代谢产物的检测方法
- redis延迟队列 实现_灵感来袭，基于Redis的分布式延迟队列（续）
- android h5输入框被键盘遮挡,APP调用H5开发页面，输入框被软键盘遮挡问题的解决方案...
- Dell服务器常用管理命令总结
- 定时任务 || Cron表达式
- 基础学习总结（五）---baseAdapter、ContentProvider
- springboot中得注解_Spring以及SpringBoot中的常用的注解小结
- java 字谜_计算字谜的出现次数
- C#LeetCode刷题之#191-位1的个数（Number of 1 Bits）
- 全栈工程师与架构师的区别是什么？
- KEIL出现ERROR：L6002U时处理方法
- 基于web的新闻发布系统
- Excel数据透视表如何创建？
- 用HTML和CSS3做个鱼,如何使用CSS和D3实现小鱼游动的交互动画（附代码）
- 洗地机性价比高的是哪款？性价比高适合入手的洗地机介绍
- 微信小程序云开发CMS中WebHook功能的使用方法
- 【Python + selenium】在浏览器打开新页签
- 这样学Shader可以少走几年弯路，看完我信了……
- 理财-股票（扫文章中的二维码下软件）
热门文章
- 回忆那年那月（1997~2003）起篇---高复班的残余
- popper.js使用_使用Popper.js创建页面上的气泡
- NameError: free variable ‘***‘ referenced before assignment in enclosing scope
- SpringCloud---搭建Eureka服务治理和发现
- Mutual Learning 互学习(DML) / collaborative learning 协作学习
- 建立完善的区块链游戏新生态——HTML5区块链游戏大会在京举行
- 360 OS的木桶理论
- iframe的几个常见问题
- Ubuntu 更改语言为中文
- Ubuntu Desktop 设置中文界面