解决在app/小程序内调用高德地图方法冲突等问题

1、首先我们需要引入相关js；

<script type="text/javascript" src="https://appx/web-view.min.js"></script>
	<script type="text/javascript"
		src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
		//引入高德地图JavaScript API文件:
	<script src="https://webapi.amap.com/maps?v=1.4.15&key=20896ef7d8cc15a28203b3662f2ac064"></script>
	<script type="text/javascript"
		src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript"
		src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js"></script>
	<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js"></script>
	<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>

这里忘记说了，我们需要在vue中定义好需要的参数；

data: {
		m1: new AMap.Marker({}), //点标记是用来标示某个位置点信息的一种地图要素
		m2: new AMap.Marker({}),
		map: new AMap.Map('container'), //初始化地图容器
		container: '',
		position: [],
		distance: 0,
		flag: true,
		name: '',
		items: [],
		      obj: {}, //ios端导航对象
        lon:'',//ios经度
        lat:''//ios维度
	}

另外，我们需要在html中的body标签中的任意一个想展示地图的位置创建一个地图容器并指定id标识:

<div id="container"></div>  

2、

在vue中我们定义好自动判断当前机型（android/ios/小程序）的方法

	containerType() {
		if (navigator.userAgent.indexOf('AlipayClient') > -1) {
			return "xcx";
		} else {
			var sUserAgent = navigator.userAgent.toLowerCase();
			var bIsAndroid = sUserAgent.match(/android/i) == "android";
			var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
			if (bIsIphoneOs) {
				return "ios";
			} else if (bIsAndroid) {
				return "android";
			} else {
				return "undif";
			}
		}
	},

3、在vue的mounted函数中调用我们定义好的获取机型的方法，
并且当其为小程序时添加小程序的获取当前地理位置的方法（经纬度）

mounted() {
			var _this = this
			//1、在渲染成html之前先执行这个类型判断的方法，对我们端类型进行赋值
			_this.container = this.containerType();
			mui.alert(_this.container);
			//_this.container = "android"
			$('body').css('min-height', window.innerHeight);
			//2、赋值之后调用查询的方法，查询到公厕信息
			_this.changsuo_query()
			//3、使用第一步获取到的类型信息进行判断选择地图方式
			if (_this.container == "android") {
				// 安卓获取定位（当前方法不可用，尝试注释掉）
				//injectedObject.getLatLon();
				_this.changsuo_query();
			} else if (_this.container == "iphone os") {
				_this.changsuo_query();
			}
			//当其为小程序的时候
			else if (_this.container == "xcx") {
				//获取用户当前地理位置的api
				my.getLocation({
					type: 2,
					success(res) {
						_this.position.push(res.longitude)//经度
						_this.position.push(res.latitude)//纬度
						_this.m2.setPosition(_this.position) //设置当前地址
						_this.position = []
						_this.changsuo_query();
					},
					fail() {
						my.alert({
							title: '定位失败, 请开启定位！'
						});
						_this.flag = false
						_this.changsuo_query();
					}
				})
			}
		},

4、在执行我们查询需要展出的列表的方法时，我们需要进行判断，当端型为小程序时，我们才能去为其计算当前位置到目的点的距离，因app我暂时没找到相应方法，后期进行完善；

//这里当其==xcx时说明为小程序，执行相应计算距离方法
		if (_this.container == 'xcx') {
								for (var item of result.params) {
									if (_this.flag) {
										_this.position.push(item.longitude)
										_this.position.push(item.latitude)
										_this.m1.setPosition(_this.position)
										_this.position = []
										_this.distance = Math.round(_this.m1.getPosition().distance(_this.m2.getPosition()));
										item.distance = _this.distance
									} else {
										item.distance = '未知'
									}
									console.log(item.distance);
								}
								result.params.sort(_this.compare('distance'))
							}

5、最后，我们需要添加一个导航按钮，通过查询出来的item，遍历出里面的经纬度，从而赋值到相应的高德地图封装的导航方法中进行执行；
这里注意，不同的端型咱们这边提供了不同的导航方法（因之前小程序跳转导航的方法无故在android的app中不能执行），咱们保险起见，分开写方法；

dt(item) {
				var _this = this
				if (_this.container == 'ios') {
					_this.obj.lon = item.longitude
					_this.obj.lat = item.latitude
					window.webkit.messageHandlers.iosAction.postMessage({
						params: JSON.stringify(_this.obj),
						"type": "locationAction"
					});
				} else if (_this.container == 'android') {
					injectedObject.locationAction(item.latitude, item.longitude);
				}
				else if (_this.container == 'xcx') {
					ap.openLocation({
						longitude: item.longitude,
						latitude: item.latitude,
						name: item.name,
						address: item.address
					});
				}

			}

最最后，给可以实现计算当前目的地与当前距离的同学奉上两个按照距离大小排序的方法；

compare(prop) {
			return function (a, b) {
				return a[prop] - b[prop]
			}

		}
filters: {
	distanceFilter(e) {
		if (e == '未知') {
			return e
		}
		if (e.toString().length > 3) {
			return Math.round(e / 1000) + '千米'
		} else {
			return e + '米'
		}
	}
}