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)
更多接口可以参考腾讯地图开放者官网