openStreetmap/pages/index/index.nvue

<template>
  <view>
	  <view >
		  <web-view ref="webview" :style="{ height: statusBarHeight + 'px'}" :src="mapUrl" @onPostMessage="getMessage"></web-view>
	  </view>
	  <view style="margin-top: 40rpx;background-color: burlywood;height: 60rpx;" @click="xianshilj">显示路径</view>
  </view>
</template>

<script>
import {getOSMAround,geoByName} from "@/pages/api/mapAPI.js"
var wv=null;//计划创建的webview
export default {
  data() {
    return {
      mapUrl: '',// 你保存的 HTML
	  statusBarHeight:0,
	  screenWidth:0,
    }
  },
  onLoad() {
	console.log("onLoad");
	this.statusBarHeight = uni.getSystemInfoSync().screenHeight-240;
	this.screenWidth = uni.getSystemInfoSync().screenWidth+100;
  	this.mapUrl='/hybrid/html/openMap/map.html?shstate=0&dlat=22.822607&dlng=108.373454'
  },
  onShow() {
	  console.log("onShow");
	  var that = this;
	  setTimeout(function() {
	  	that.showMark();
	  }, 3600); //需要延时一下，防抖动
  },
  methods:{
	  getMessage(e) {
	  	console.log("--getMessage--",e);
	  	
	  },
	  
	  showMark(){
		  getOSMAround(22.822607, 108.373454, 600)
		    .then(data => {
		      console.log("附近OSM对象：", data);
				var poiObj = data[0];
				var jwd = {
					lat:poiObj.lat,
					lon:poiObj.lon
				}
				var obj={
					payload:jwd,
					type:1
				};
				var str = JSON.stringify(obj);
				console.log(obj);
				this.$refs.webview.evalJs('showAddrMark('+str+')');
				
			})
		    .catch(err => {
		      console.error(err);
		    });
	  },
	  xianshilj(){
		uni.navigateTo({
			url:'/pages/index/openNavMap'
		})
	  },
	  
  }
}
</script>

<style>
.container { width: 100%; height: 100vh; }
</style>