在uniapp 和 H5中使用华为花瓣地图

官方文档：业务介绍-地图服务 - 华为HarmonyOS开发者

本人使用的是通过web-view组件引入H5页面实现的，故使用Javascript API

前置准备

注册流程官方写的很清楚了，在“开发准备”里，开发准备-JavaScript-地图服务 - 华为HarmonyOS开发者

注意（1）如果使用API认证方式，官方说的这个转换在JS里要使用encodeURIComponent('你的APIKey')转换，否则调用接口会报401错误

（2）如果是企业开发者要把地图服务升级为付费档，否则调用接口会报403错误，个人开发者有免费的额度。

然后需要什么功能跟着文档做就行了。

自用下来各功能都还不错，地图清晰，也能搜到地点，地图加载也快。

但是！！！拖动地图卡！！大家可以地图显示成功后不要做功能，先试一下看能否接受。

拖动地图卡的问题mapOptions.sourceType = 'raster' 设置为栅格形式流畅很多，但清晰度下降，看取舍了。*如果要使用路况图层则不能使用mapOptions.sourceType = 'raster'，只能用标准地图

避坑：（1）自带的控件很多无法自定义控件位置，如果需要复杂功能建议自己做控件，比如定位控件，地图视野会被缩放的很小，而且自带的定位控件竟然是wgs84坐标？定位根本不准

例如自己模拟定位控件：

<!--.location-control-div会自动应用地图自带控件的样式，所以和自带控件长得是一样的-->
<div id="locationControlDiv" class="location-control-div">
    <button id="locationControlButton" type="button" class="location-control"></button>
</div>

 $("#locationControlDiv").click(() => {
     //......
     navigator.geolocation.getCurrentPosition(r => {
     //......
     //需要用coordtransform转一下变成gcj02坐标位置才能显示准确
     const [lng, lat] = coordtransform.wgs84togcj02(r.coords.longitude,r.coords.latitude);       
     map.panTo({ lat: lat lng: lng });
     map.setZoom(16);     
     //.......
   }, (e) => {
     //....
   }, {
     enableHighAccuracy: true,
     maximumAge: 0,
   })
})

（2）坐标系似乎用的gcj02坐标系，用navigator.geolocation.getCurrentPosition获取的坐标需要处理才会显示正确的位置，华为提供了HWMapJsSDK.HWCoordinateConverter类用于WGS84坐标转GCJ02坐标，但实测根本用不了，可自己用coordtransform.js转

（3）infowindow 默认不支持事件穿透，即手指在infowindow上移动无法移动地图，可以使用css处理：

        .hw-overlay-container {
            pointer-events: none !important;
        }

但这样做的缺点就是各类事件包括自带的close,open的事件失效。

如果不在意一定要infowindow样式的话，HWOverlay支持事件穿透设置：

        new HWMapJsSDK.HWOverlay({
            map: map,
            position: position,
            content: content,
            stopEvent: false,  //表示支持穿透
        })

2024/12/22：最近发现Javascript api在安卓8.1以下手机自带的webview中运行报错，（微信小程序、微信浏览器H5中不影响）并且在一加12手机中存在底图加载不全问题，已向华为提交工单。