html5中高德、腾讯、百度地图api调起手机app

最新推荐文章于 2024-04-17 11:12:55 发布

转载最新推荐文章于 2024-04-17 11:12:55 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jrg-Archer/p/9037023.html

本文介绍了一种通过JavaScript为不同的在线地图服务（如高德地图、腾讯地图和百度地图）生成定制化链接的方法。该方法根据组织名称和地址信息动态创建地图链接。

html 部分

<div id="mapBg">
    <div class="mapTab">
        <a href="" class="mapBtn_g"><div>高德地图</div></a>
        <a href="" class="mapBtn_t"><div>腾讯地图</div></a>
        <a href="" class="mapBtn_b"><div>百度地图</div></a>
    </div>
</div>

js 部分

/*高德*/
var mapUrl_gd ="http://uri.amap.com/marker?position=108.958486,34.271454&name="+inform.orgName+"&src=yellowpage&coordinate=gaode&callnative=1";
 $("#mapBg .mapTab .mapBtn_g").attr("href",mapUrl_gd);

/*腾讯*/
var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:34.271454,108.958486;title:"+inform.orgName+";addr:"+inform.orgAddress+"&referer=yellowpage"
 $("#mapBg .mapTab .mapBtn_t").attr("href",mapUrl_tx);

/*百度*/
var mapUrl_bd ="http://api.map.baidu.com/marker?location=34.271454,108.958486&title="+inform.orgName+"&content="+inform.orgAddress+"&output=html&src=yellowpage";
$("#mapBg .mapTab .mapBtn_b").attr("href",mapUrl_bd);

效果图：

转载于:https://www.cnblogs.com/jrg-Archer/p/9037023.html

html5中高德、腾讯、百度 地图api调起手机app

html5中高德、腾讯、百度地图api调起手机app