1、引入js(加key引用‘http://map.qq.com/api/js?v=2.exp&key=yourkey’)
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
2、demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<body>
<div id="test" style="height: 500px"></div>
<script type="text/javascript">
var geo = new qq.maps.Geocoder()
console.log(geo)
geo.getLocation('中国,广州,沙太路268号')//地址
geo.setComplete(function(res){
console.log(res,res.detail.location)//得到经纬度
var map = new qq.maps.Map(document.getElementById('test'),{
center: res.detail.location,//将经纬度加到center属性上
zoom: 16,//缩放
draggable: true,//是否可拖拽
scrollwheel: true,//是否可滚动缩放
disableDoubleClickZoom: false
})
var marker = new qq.maps.Marker({
position: res.detail.location,//标记的经纬度
animation: qq.maps.MarkerAnimation.BOUNCE,//标记的动画
map: map//标记的地图
})
var citylocation = new qq.maps.CityService({
//设置地图
map : map,
complete : function(results){
console.log(9999,results)
}
});
})
</script>
<script type="text/javascript">
console.log(returnCitySN,returnCitySN["cip"]+','+returnCitySN["cname"])
</script>
</body>
</html>