獲取當前位置，顯示指定位置標識，支持點擊顯示信息，實現(xiàn)路線規(guī)劃。注意appKey需要再騰訊地圖申請。

html,body{

width:100%;

height:100%;

}

*{

margin:0px;

padding:0px;

}

#container{

width:100%;

height:100%;

}

.topoidet {

display: block;

}

.topoidet .det-title {

display: block;

font-size: 16px;

line-height: 26px;

color: #0079ff;

font-weight: 700;

}

.topoidet .det-addr {

display: block;

font-size: 12px;

line-height: 18px;

color: #8a8d8f;

}

.tonav {

display: block;

background-color: #0079ff;

top: 5px;

height: 34px;

text-align: center;

line-height: 34px;

font-size: 21px;

border-radius: 4px;

margin: 5px;

}

.tonav i {

background: url(images/arrow.png) no-repeat;

background-size: cover;

display: block;

position: absolute;

bottom: 7px;

left: 3px;

width: 21px;

height: 21px;

}

.tonav span {

display: block;

font-size: 15px;

color: #fff;

}

.poiresultinfowindow {

width: 183px;

-webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);

box-shadow: 0 0 6px rgba(0,0,0,.1);

transform: translateZ(0);

-webkit-transform: translateZ(0);

z-index: 200;

}

var markers = [];

var list = [

[22.831440,113.264000, "順德大良全球通營業(yè)廳", "大良保健路128號全球通大廈首層"],

[22.817430,113.259180, "順德大良延年營業(yè)廳", "順德區(qū)大良街道近良居委會南區(qū)延年路11-2 號之1-3號商鋪(大良醫(yī)院紅綠燈對面)"],

[22.838870,113.255090, "順德大良鳳山營業(yè)廳", "大良鎮(zhèn)鳳山東路6號德業(yè)大廈11－13號商鋪"],

[22.772820,113.276620, "順德容桂鳳祥營業(yè)廳", "容桂街道鳳祥南路27號地下商鋪"],

[22.777150,113.281560, "順德容桂世紀營業(yè)廳", "容桂街道容奇大道中19號20、21商鋪"]

];

var appKey = "appKey";

var geolocation = new qq.maps.Geolocation(appKey, "fsej");

var map;

var isInit = false;

var infoWin;

function init(){

//調(diào)用searchLocalCity();方法 根據(jù)用戶IP查詢城市信息。

//citylocation.searchLocalCity();

//增加監(jiān)聽事件

window.addEventListener('message', function(event) {

//console.log(event.data);

if(event.data){

showPosition(event.data);

}

}, false);

//獲取當前位置信息

geolocation.getLocation(showPosition, null);

}

function showPosition(position) {

if(isInit){

return;

}

isInit = true;

//設置當前位置為中心

var center = new qq.maps.LatLng(position.lat,position.lng);

map = new qq.maps.Map(document.getElementById('container'),{

center: center,

zoom: 15

});

//初始化info用于點擊Marker時顯示

infoWin = new qq.maps.InfoWindow({

map: map

});

//在當前位置增加Marker

var anchor = new qq.maps.Point(6, 6);

var size = new qq.maps.Size(24, 24);

var origin = new qq.maps.Point(0, 0);

var icon = new qq.maps.MarkerImage('images/center.gif', size, origin, anchor);

var marker = new qq.maps.Marker({

position: center,

icon: icon,

map: map

});

//在地圖上顯示list的所示坐標的Marker

for(var i = 0; i < list.length; i++){

(function(n){

marker = new qq.maps.Marker({

position: new qq.maps.LatLng(list[n][0], list[n][1]),

map: map

});

//點擊Marker顯示info, 支持導航

qq.maps.event.addListener(marker, 'click', function(evt) {

var p = evt.target.getPosition();

var url = "http://apis.map.qq.com/tools/routeplan/epointx=" + p.getLng() + "&epointy=" + p.getLat() + "&eword=" + list[n][2] + "?referer=fsej&key=" + appKey + "&backurl=" + window.location.href;

infoWin.open();

infoWin.setContent("

" + list[n][2] + "" + list[n][3] + "去這里");

infoWin.setPosition(p);

map.panTo(p);

});

markers.push(marker);

})(i);

}

};

總結

以上是生活随笔為你收集整理的android 腾讯地图demo,腾讯地图调用Demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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