微信html5页面调用第三方位置导航的示例

近年来，随着移动互联网的迅速发展，新兴的html5技术已经逐渐成为了移动应用开发的主流。html5的应用场景非常多，不仅可以用于常规的网站制作、企业自媒体营销，还可以用于开发手游、移动端应用等等。而我们今天要讲的，是如何在微信html5页面中调用第三方位置导航工具。

随着地图类应用越来越普遍，很多公司都开发了自己的地图导航功能。比如高德地图、百度地图、谷歌地图等等，这些地图服务商都提供了API接口，可以供我们开发者使用。而在微信html5页面中，调用这些API接口进行位置导航，也是非常简单的。下面我们就来介绍一下详细的实现方法。

步骤一：获取用户地理位置信息

首先，我们需要获取用户的地理位置信息。这可以通过微信JS SDK提供的'wx.getLocation'方法实现。这个方法接收一个回调函数作为参数。这个回调函数会在获取位置信息成功后被调用，可以在这里获取到用户的纬度、经度等信息。下面是获取用户地理位置信息的代码示例：

wx.getLocation({
    type: 'wgs84',
    success: function(res) {
        var latitude = res.latitude; //纬度
        var longitude = res.longitude; //经度
        var speed = res.speed; //速度，单位m/s
        var accuracy = res.accuracy; //位置精度
    }
});

步骤二：根据用户地理位置信息调用第三方地图API

接下来，我们可以根据获取到的用户地理位置信息，调用第三方地图API，并传入参数，获取到地点的位置信息。比如，我们可以调用高德地图API的搜索功能，搜索附近的餐厅，然后获取搜索结果中 个餐厅的位置信息。下面是调用高德地图API的代码示例：

var url = "http://restapi.amap.com/v3/place/around?key=YOUR_KEY&location=LATITUDE,LONGITUDE&keywords=餐厅&radius=1000&offset=1&page=1&extensions=base";
$.ajax({
    type: 'GET',
    url: url,
    dataType: 'jsonp',
    success: function(data){
        var result = data.pois[0];
        var name = result.name;
        var location = result.location;
        var lng = location.split(',')[0];
        var lat = location.split(',')[1];
    }
});

在调用高德地图API时，需要替换YOUR_KEY为你自己的高德地图开发者key，LATITUDE和LONGITUDE为之前获取到的用户地理位置信息中的纬度和经度。

步骤三：调用第三方地图导航工具

最后，我们可以调用第三方地图导航工具，将目的地的位置信息传入，并启动导航功能。以高德地图为例，可以调用高德地图URI Scheme的方法，实现启动导航的功能。下面是调用高德地图导航功能的代码示例：

var url = "androidamap://navi?sourceApplication=YOUR_APP_NAME&lat=LATITUDE&lon=LONGITUDE&dev=0";

if (/(android)/i.test(navigator.userAgent)) {
    window.location.href = url;
} else {
    window.location.href = "http://maps.apple.com/maps?daddr=LATITUDE,LONGITUDE";
}

在调用高德地图导航功能时，需要替换YOUR_APP_NAME为你自己的应用名称，LATITUDE和LONGITUDE为之前获取到的目的地位置信息中的纬度和经度。对于iOS系统，我们可以调用苹果自带的地图应用实现导航功能，而对于其他系统app，我们可以启动高德地图app。

总结

以上就是在微信html5页面中调用第三方位置导航工具的示例。通过这个示例我们可以了解到，在html5中调用第三方地图服务并不难，只需要调用相应的API接口，并传入参数或者调用URI Scheme即可实现导航的功能。同时我们还需要注意的是，由于涉及到用户的地理位置信息，我们需要遵循相应的隐私政策，保护用户的个人隐私。