android加载高德地图请求服务器添加经纬度marker标记(调用h5加载)

前言:(原创文章,转载请注明出处)

老板突发奇想要让用android加载h5做地图,还有根据请求的不同经纬度在地图上显示出不同的marker标记(。。。。这个破需求感觉没啥大用处,可能也就不懂软件的人看着高大上吧)本人小白,不会h5,也不会js。根据自己写过的webview的demo加上后台(比我js懂得多)的帮助,终于攻克了这个小难题,下面给大家一个小教程,以免走弯路。

一:webview设置

webView.getSettings().setAppCacheEnabled(true);//是否使用缓存api集

webView.getSettings().setJavaScriptEnabled(true);//js交互

webView.getSettings().setDomStorageEnabled(true);//与地图交互

webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);//设置js可弹窗

webView.setWebChromeClient(new WebChromeClient(){}//处理解析,渲染网页

webView.setWebViewClient(new WebViewClient(){}//打开网页时不调用系统浏览器,而是在本地的webview显示

二:js地图加载显示

<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.10&key=“你自己申请的key"></script>
<script type="text/javascri
### UniApp中集成高德地图API实现地理选择 为了在UniApp项目里集成高德地图SDK并允许用户选取地理位置(经度和纬度),开发者需遵循特定流程完成环境搭建与功能实现。 #### 环境准备 首先,确保已注册成为高德开放平台成员,并成功创建应用以获取专属的Key。对于前端框架如Vue,在使用JavaScript API前应安装`@amap/amap-jsapi-loader`作为加载工具[^4]。然而针对UniApp环境,则需要关注其特有的插件机制而非直接采用npm包管理方式处理依赖项。 #### 功能实现步骤概述 - **初始化地图实例** 开发者可以在页面生命周期函数`onLoad()`或者自定义方法内部调用AMapLoader.load()来异步加载地图库文件,进而初始化地图对象。 - **绑定事件监听器** 使用`map.on('click', callback)`为地图添加点击事件处理器,当检测到用户的交互行为时触发回调逻辑计算鼠标指针所处坐标点对应的经纬度值[^1]。 - **展示选定点位标记** 创建Marker图层元素放置于指定位置之上以便直观反馈给操作者确认选定区域;同时更新界面上其他关联输入框的内容反映最新数据变化情况[^3]。 ```javascript // 示例代码片段:uni-app环境下利用H5+特性封装的地图服务接口 export default { data(){ return{ map:null, marker:{} } }, onLoad(option){ this.initMap(); }, methods:{ async initMap(){ const key='您申请得到的应用程序密钥'; await new Promise((resolve,reject)=>{ window.AMapLoader = require('@amap/amap-jsapi-loader'); AMapLoader.load({ "key": key, // 申请好的Web端开发者KEY "version":"2.0", // 指定要加载JSAPI版本,默认为1.4.15 "plugins":[], // 需要使用的插件列表,如比例尺'AMap.Scale' }).then(AMap=>{ resolve(new AMap.Map('container',{ zoom:10 // 设置地图缩放级别 })); }); }).then(map=>this.map=map); this.bindEvents(); }, bindEvents(){ let _self=this; this.map.on('click',(e)=>{ // 绑定地图单击事件 console.log(e.lnglat.getLng(), e.lnglat.getLat()); if(_self.marker)_self.map.remove(_self.marker); // 移除原有marker (_self.marker=new AMap.Marker({ // 新建marker position:[e.lnglat.getLng(), e.lnglat.getLat()], offset:new AMap.Pixel(-13,-30), icon:"https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" })).setMap(this.map); uni.setStorageSync('selectedPosition',{lng:e.lnglat.getLng(), lat:e.lnglat.getLat()}); }) } } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值