营销型网站设计思路,网页美工设计培训学校,好的模板网站推荐,wordpress 媒体播放搞了我两天的一个问题。 hbuilderx版本#xff1a;4.36 问题介绍#xff1a; 我的项目是公司的项目#xff0c;需要在H5端使用百度地图#xff0c;使用vue-cli创建的uniapp#xff0c;就是uni代码在src里的目录结构。就是使用这种方式才会遇到这个问题。 问题原因#xf…搞了我两天的一个问题。 hbuilderx版本4.36 问题介绍 我的项目是公司的项目需要在H5端使用百度地图使用vue-cli创建的uniapp就是uni代码在src里的目录结构。就是使用这种方式才会遇到这个问题。 问题原因 cli创建的项目编译时不是使用hbuilderx编译而是使用自己的node_modules内的uni依赖包编译如果你直接在hbuilderx新建项目你会发现没有node_modules因为用的是hbuilderx的环境编译所以导致版本跟不上。map组件找不到manifest.json配置的百度地图key。其他的key可以。 这里有个坑。腾讯地图的mapkey名不同版本名字不一样最新版本是tencent,老的是qqmap。当我用hbuilderx配置勾选腾讯地图后在manifest.json内看到的key名是tencent但我的项目是cli创建的老版本编译只能识别qqmap所以也会导致Map key not configured csdn。 解决办法 在public文件夹下的index.html加入
script typetext/javascript srchttps://api.map.baidu.com/api?v3.0typewebglak你的key/script然后在页面使用
templateview classcar-position-mapdiv idbaiduMapContainer classmap/div/view
/template// js
var map new BMapGL.Map(baiduMapContainer); // 创建地图实例
var point new BMapGL.Point(this.longitude, this.latitude); // 创建点坐标
map.centerAndZoom(point, 16); // 初始化地图设置中心点坐标和地图级别
var marker new BMapGL.Marker(point);
map.addOverlay(marker);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放最方便的还是使用Uniapp内置的map组件不过我试了下在我的项目弄不了,应该是编译版本不支持又不好改。 如果不是cli项目可以配置百度地图key.需要在manifest.json源码自己添加hbuilderx 定位和地图可视化配置不能勾百度地图以后可能会更新。
h5 : {sdkConfigs : {maps : {bmap : {// 百度地图秘钥HBuilderX 3.99http://lbsyun.baidu.com/apiconsole/key#/homekey : }}}}运行效果 自己写的一个模仿uniapp内置map的组件
template!-- 模拟uniapp map组件 --div idbaiduMapContainer classmap/div
/templatescriptexport default {name: baiduMap,props: {id: {type: String,default: },latitude: {type: [String, Number],default: 39.92},longitude: {type: [String, Number],default: 116.46},scale: {type: [String, Number],default: 16},markers: {type: Array,default () {return []}},covers: {type: Array,default () {return []}},// includePoints: {// type: Array,// default () {// return []// }// },polyline: {type: Array,default () {return []}},circles: {type: Array,default () {return []}},controls: {type: Array,default () {return []}},showLocation: {type: [Boolean, String],default: false},libraries: {type: Array,default () {return []}},polygons: {type: Array,default: () []}},data() {return {circle: null, // 圆实例// mapScale: 16,map: null,markerHandleObj: [], // 根据传入的markers id存入操作对象和信息,便于操作点标签tempIcon: https://img0.baidu.com/it/u1848373536,836779508fm253app120sizew931n0fJPEGfmtauto?sec1734109200tf268c95df20d59d0cf92c89e1a29dfce,};},watch: {markers: {deep: true,async handler(val) {if (val val.length) {console.log(更新地图点标记, this.markers)this.markers.forEach((markerItem, index) {this.addMarker(markerItem)})}},},circles: {deep: true,immediate: true,async handler(val) {if (val val.length ! 0) {console.log(更新圆, this.circles)if (!this.map) setTimeout(() {this.circles.forEach((item, index) {this.addCircle({longitude: this.longitude,latitude: this.latitude,option: item})})}, 50)else {this.circles.forEach((item, index) {this.addCircle({longitude: this.longitude,latitude: this.latitude,option: item})})}}},}},mounted() {this.initMap();},methods: {// 添加单个标记addMarker(markerItem) {let handleObj null;handleObj this.markerHandleObj.find(item {return item.markerInfo.id markerItem.id})if (!handleObj) {this.markerHandleObj.push({markerInfo: null,marker: null})handleObj this.markerHandleObj[this.markerHandleObj.length - 1]}if (handleObj) {// 信息没变则不更新标记if (JSON.stringify(markerItem) ! handleObj.markerInfo) {handleObj.markerInfo JSON.parse(JSON.stringify(markerItem));var point new BMapGL.Point(markerItem.longitude, markerItem.latitude); // 创建点坐标// 初始化标记实例if (!handleObj.marker) {// console.log(添加点标记)// 创建点标记图标var markerIcon new BMapGL.Icon(markerItem.iconPath, new BMapGL.Size(markerItem.width,markerItem.height));// var markerIcon new BMapGL.Icon(/static/images/img_map_carLabel3x.png, new BMapGL.Size(markerItem.width, markerItem.height));// var markerIcon new BMapGL.Icon(this.tempIcon, new BMapGL.Size(markerItem.width, markerItem.height));let marker null;if (markerItem.customCallout markerItem.address) {// 创建标签marker new BMapGL.Label(img src${markerItem.iconPath} stylevertical-align:middle; width: 16px; height: 16px;/ markerItem.address, {point,// offset:{}});// 设置label的样式marker.setStyle(markerItem.styles);marker.id markerItem.id// 为label添加点击事件监听器marker.addEventListener(click, (e) {this.$emit(callouttap, e)// 在这里执行你所需的操作});} else {marker new BMapGL.Marker(point, {icon: markerIcon});}handleObj.marker marker;handleObj.markerInfo markerItemthis.map.addOverlay(handleObj.marker);} else {// 更新点标记的坐标handleObj.marker.setPosition(point);}// 更新车的旋转角度if (markerItem.rotate) {handleObj.marker.setRotation(markerItem.rotate);}}}},// 添加一组标记addMarkers(info) {info.markers.forEach(item {this.addMarker(item)})// console.log(addMarkers, info)},initMap() {var map new BMapGL.Map(baiduMapContainer); // 创建地图实例var point new BMapGL.Point(this.longitude, this.latitude); // 创建点坐标map.centerAndZoom(point, this.scale); // 初始化地图设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.addEventListener(click, (e) {// console.log(click:, e)this.$emit(onMapClick, e, map)});this.map map;console.log(初始化地图)},// 画圆async addCircle(info) {if (info) {// 删除旧的实例暂时只支持画一个圆if (this.map.getOverlays().length 0) {this.map.removeOverlay(this.circle); // 先移除旧的圆形}var point new BMapGL.Point(info.longitude, info.latitude); // 创建点坐标this.circle new BMapGL.Circle(point, info.option.radius, info.option);// this.circle.setCenter(new LatLng(39.916935, 116.372119));this.map?.addOverlay(this.circle);}},moveToLocation(location) {var point new BMapGL.Point(location.longitude, location.latitude);//切换地图位置this.map.centerAndZoom(point, this.scale);if (location.success) location.success()},//info {points: markers,padding: [60, 60, 60, 60],}// 将试图拉伸到显示一组点includePoints(info) {if (info.points.length 1) {const points []info.points.forEach(item {points.push(new BMapGL.Point(item.longitude, item.latitude))})// 根据点坐标数组计算视图范围var viewport this.map.getViewport(points);// 调整地图的中心点和缩放级别this.map.centerAndZoom(viewport.center, viewport.zoom);}}}}
/scriptstyle
/style
