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

點(diǎn)擊地圖出現(xiàn)詳細(xì)的地圖：

這是一個(gè)基于微信端的地圖處理方案。
先看看html架構(gòu)：

<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>

然后是重點(diǎn)的js:

var citylocation,map,marker = null; //給外層的a標(biāo)簽加上url，方便一會(huì)點(diǎn)擊小地圖的時(shí)候直接跳轉(zhuǎn)。 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和對應(yīng)地址的經(jīng)緯度 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});//調(diào)用城市服務(wù)信息citylocation = new qq.maps.CityService({complete : function(results){map.setCenter(results.detail.latLng);if (marker != null) {// marker.setMap(null);}//設(shè)置marker標(biāo)記marker = new qq.maps.Marker({map: map,position: results.detail.latLng});}});citylocation.searchCityByLatLng(center);newMapGo('aToMap',lat,lng); } //給id,經(jīng)緯度 newMap('map-container',23.12463,113.36199)

更多接口可以參考騰訊地圖開放者官網(wǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。