百度地图和腾讯地图应用在H5侧启动

需求摘要；

在微信公众号中，单击地图应用以根据地图上的标记和标签或搜索结果进行导航.

最初，百度地图用于开发. 后来微信网页调用地图导航，由于微信不允许在微信自己的浏览器中引发非自己或合作伙伴的应用，因此腾讯被转移. （嘿，让我们谈谈微信. 这是垄断吗？腾讯地图中是否有没有浮记B的败类？用户使用是一个很好的证明！）

第一:

将制造商微信网页调用地图导航，标签和相应的点击事件添加到百度地图. 如果您需要创建多个标记和标签；只需从第二行开始循环创建地址解析器的示例.

通过单击此处，将调用百度地图URI界面来调用百度地图APP. 如果用户安装它，将提示他们打出一个外部APP. 如果未安装它们，将提示他们下载. 测试适用于iOS和Android.

但是，百度地图导航的坏处是起始位置的纬度和经度. 在这里，首先获取当地经度，然后使用行车导航.

ps: demo中的某些变量可以替换为您自己的变量.

 1 let map = new BMap.Map("baseMap");
 2 // 创建地址解析器实例
 3  var myGeo = new BMap.Geocoder();
 4 // 将地址解析结果显示在地图上,并调整地图视野
 5  myGeo.getPoint(type.address, function(point){
 6     if (point) {
 7            map.centerAndZoom(point, 11);
 8            let marker = new BMap.Marker(point);
 9            map.addOverlay(marker);
10            marker.addEventListener("click", function(e) {
11                 window.location.href=`http://api.map.baidu.com/direction?origin=latlng:${loca.point.lat},${loca.point.lng}|name:我的位置&destination=${type.address}&mode=driving&region=${loca.city}&output=html`;
12                 console.log('click ' + type.address)
13            });
14            var label = new BMap.Label(type.userName,{offset:new BMap.Size(20,-10)});
15            label.addEventListener("click", function(e) {
16                 window.location.href=`http://api.map.baidu.com/direction?origin=latlng:${loca.point.lat},${loca.point.lng}|name:我的位置&destination=${type.address}&mode=driving&region=${loca.city}&output=html`;
17                 console.log('click ' + type.address)
18            });
19            marker.setLabel(label)
20            }else{
21                console.log("您选择地址没有解析到结果!");
22            }
23 }, type.city);
24                                 

腾讯地图与百度地图不同. 循环时，腾讯地图使用封闭的独立空间. 这位官员没有提供在互联网上找到的演示，在这里不禁要谈论腾讯地图和社区的演示文档. .

使用腾讯地图URI导航时，H5终端的优势在于，如果您不写from from字段，则默认使用当前地址，但只能位于h5终端上. 在PC端进行开发时，它将提示找不到该位置. 打开pc / h5终端时可以找到百度地图.

 1 let map = new qq.maps.Map(document.getElementById('baseMap'), {
 2     disableDefaultUI: true,
 3     zoom: 12
 4 });
 5 var infoWin = new qq.maps.InfoWindow({  
 6     map: map  
 7 });
 8 
 9 for(let type of markerList) {
10     (function(address, name) {
11           let geocoder = new qq.maps.Geocoder();
12           geocoder.getLocation(address);
13           //设置服务请求成功的回调函数
14           geocoder.setComplete(function(result) {
15               let latLng = new qq.maps.LatLng(result.detail.location.lat, result.detail.location.lng);
16               map.setCenter(latLng)
17                         
18               let marker=new qq.maps.Marker({
19                     position: latLng,
20                     animation: qq.maps.MarkerAnimation.DROP,
21                     map: map
22               });
23               let label = new qq.maps.Label({
24                   position: latLng,
25                   map: map,
26                   offset: new qq.maps.Size(13, -38),
27                   style: {padding: "1px 5px",borderRadius: "5px",border: "1px solid #D7290F", zIndex: 99},
28                   content: name
29               });
30               qq.maps.event.addListener(marker, 'click', function(e) {
31                   console.log(e, + '----' + marker.getPosition())
32                   window.location.href=`http://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${address}&policy=0&referer=educationBase`;
33               })
34               qq.maps.event.addListener(label, 'click', function(e) {
35                   console.log(e, + '----' + label.getPosition())
36                   window.location.href=`http://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${address}&policy=0&referer=educationBase`;
37               })
38                         
39 
40      });
41      //若服务请求失败，则运行以下函数
42      geocoder.setError(function() {
43          console.log("出错了，请输入正确的地址！！！");
44      });
45  })(type.address, type.userName);
46   
47  } 

另一个未使用的高德地图实际上使用URI来唤起应用程序. 官方文件也足够. 在单个项目的开始，它需要使用百度地图，因此没有进行深入讨论. 欢迎大家互相学习.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shouji/article-262331-1.html