html5頁面中添加騰訊地圖api：

點擊地圖出現詳細的地圖：

這是一個基于微信端的地圖處理方案。
先看看html架構：

<a id="aToMap" href=""><div class="map" id="map-container"></div> </a> <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>

然后是重點的js:

var citylocation,map,marker = null; //給外層的a標簽加上url，方便一會點擊小地圖的時候直接跳轉。 function newMapGo(id,lat,lng){var markUrl = 'https://apis.map.qq.com/tools/poimarker' +'?marker=coord:' + lat + ',' + lng + '&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';//給位置展示組件賦值document.getElementById(id).href = markUrl;} //需要外層元素id和對應地址的經緯度 function newMap(id,lat,lng){var center = new qq.maps.LatLng(lat, lng);var map = new qq.maps.Map(document.getElementById(id), {center: center,zoom: 18});//調用城市服務信息citylocation = new qq.maps.CityService({complete : function(results){map.setCenter(results.detail.latLng);if (marker != null) {// marker.setMap(null);}//設置marker標記marker = new qq.maps.Marker({map: map,position: results.detail.latLng});}});citylocation.searchCityByLatLng(center);newMapGo('aToMap',lat,lng); } //給id,經緯度 newMap('map-container',23.12463,113.36199)

更多接口可以參考騰訊地圖開放者官網

總結

以上是生活随笔為你收集整理的html5页面中添加腾讯地图api的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。