uniapp app引入谷歌地图

首先附上原参考链接，我是参考https://blog.csdn.net/jz_jingzhen/article/details/119391472做的，原文是地图上只显示一个标点，下面我自己的是地图显示多个标点（中心思想是利用for循环画多个点）

调用谷歌地图，在手机上测试的环境是需要翻墙的

1.在谷歌申请key
2.在根目录下的hybrid->html下新建一个map.html，代码如下

<!DOCTYPE html>
<html><head><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script><scriptsrc="https://maps.googleapis.com/maps/api/js?key=地图key&callback=initMap&libraries=&v=weekly"defer></script><script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script><style type="text/css">#map {height: 100%;width: 100%;}html,body {height: 100%;width: 100%;margin: 0;padding: 0;}</style></head><body><div id="map"></div></body>
</html>
<script>document.addEventListener('UniAppJSBridgeReady', function() {uni.postMessage({data: {action: 'message'}});uni.getEnv(function(res) {console.log('当前环境：' + JSON.stringify(res));});});
</script>
<script>var map = nullfunction initMap() {//页面传过来的参数arrvar mapPointResult = JSON.parse(decodeURIComponent(GetUrlParam('arr')))var centerPoint = {lat: mapPointResult[0].lat, lng: mapPointResult[0].lng, };//新建mapmap = new google.maps.Map(document.getElementById("map"), {zoom: 16,center: centerPoint,});var places = [];for (var j = 0; j < mapPointResult.length; j++) {places.push(new google.maps.LatLng(mapPointResult[j].lat, mapPointResult[j].lng));}for (var i = 0; i < places.length; i++) {// Creating a new markervar marker = new google.maps.Marker({position: places[i],map: map,title: 'Place number ' + i,icon: {url: 'https://now.guua.com/attachs/default/location_shop.png',scaledSize: new google.maps.Size(30, 30),origin: new google.maps.Point(0, 0),anchor: new google.maps.Point(0, 0)}});}}// 处理URL参数function GetUrlParam(paraName) {var url = window.location.href;var arrObj = url.split("?");if (arrObj.length > 1) {var arrPara = arrObj[1].split("&");var arr;for (var i = 0; i < arrPara.length; i++) {arr = arrPara[i].split("=");if (arr != null && arr[0] == paraName) {return arr[1];}}return "";} else {return "";}}
</script>

3.使用谷歌地图，新建一个vue页面

<template><view><web-view :src="src"></web-view></view>
</template><script>
export default {data() {return {src: '',arr: [{lng: 103.53028, lat: 10.62592},{lng: 104.82425, lat: 11.58515}]};},onLoad() {//因为我是多个标记，所以我的是一个数组this.src = '/hybrid/html/map.html?arr=' + encodeURIComponent(JSON.stringify(this.arr));},methods: {}
};
</script><style></style>

uniapp app引入谷歌地图相关推荐

uniapp 打包app 引入高德地图sdk
uniapp 打包app 引入高德地图sdk 1. 注册高德地图开放平台账号并添加应用,在应用中添加key 2. 生成自有证书(windows系统) 3. 高德地图key生成并配置到项目中 4. 地 ...
vue全局引入openlayers_vue中使用OpenLayers（一）：引入谷歌地图
vue中使用OpenLayers(一):引入谷歌地图第一步 npm install ol package.json 中可以看到第二步引入 import "ol/ol.css" ...
旅游地图制作_手把手教你用旅游神器App：谷歌地图
前言语言.交通和文化等的障碍困扰着大多数自由行游客.而如果你拥有一些旅游神器App就会发现原来自由行也可以很轻松! 在为大家进行行前咨询时推荐过很多实用App,大多得到了非常好的反馈.我将分几篇文章 ...
uni-app web-view调用谷歌地图
由于公司的业务主要是非洲的,所以做地图功能的时候就需要用到一款国际地图,高德直接不支持,百度的在uni-app上配置了没效果,苹果地图也找过,但是在indentifiers下面没有找到map IDS选 ...
uniapp h5 引入高德地图
因地图收费.uniapp h5 是腾讯地图,公司为了少交一份钱,就改为引入高德地图我才用是模板引入js 首先在项目跟根目录添加index.html <!DOCTYPE html> < ...
在html中引入谷歌地图
最近项目中需要用到谷歌地图,以下做个简单分享,希望帮助到有需要的各位! 引入地图之前,首先申请key值申请google地图api_key详情介绍详细代码 <html><div id ...
H5唤醒本地APP（谷歌地图、百度地图等相通）
说一下兼容性问题: IOS:safari浏览器,google浏览器,UC浏览器可用QQ浏览器无法使用,其他的没测. Android:只有google浏览器可以打开谷歌地图,百度地图没测试. 首先:判断 ...
H5唤醒本地APP（谷歌地图、百度地图等相通）传递数据
前一段时间做了一个架设在微信上的打车软件,司机端是在浏览器中打开,网页上的导航无法实时定位与语音播报,后因甲方强制要求,必须打开本地谷歌地图,并传入用户的起点终点,于是翻译了相关博客,完美解决,亲测可 ...
uniapp app调用手机地图软件
//打开第三方地图 //经纬度加地址名字 export function toMapAPP(latitude, longitude, name) {let url = "";if ...

uniapp app引入谷歌地图

uniapp app引入谷歌地图相关推荐

最新文章

热门文章