腾讯地图网页内引用 - 普通

修改时间: 2018-12-11 12:57:00 PM

文章时间:2018年12月11日 12:55:51

这里是普通的调用方式,测试可执行
chrome浏览器可能报错,请访问异步调用方式
异步:https://wiki.nooss.cn/archives/77.html
不限制域名key密钥:ONDBZ-DL4WV-EGVPM-URJ56-KL373-GRBJD

头部添加

<!--引用地图样式-->
<style type="text/css">
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container{
    min-width:320px;
    min-height:450px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=ONDBZ-DL4WV-EGVPM-URJ56-KL373-GRBJD"></script>

body添加

<!--画地图-->
<div id="container">&nbsp;</div>

任意地方添加

<script>
function MyMap() {
    var center = new qq.maps.LatLng(36.718710,119.109930);
    var map = new qq.maps.Map(document.getElementById('container'),{
        center: center,
        zoom: 16
    });
    //创建标记
    var marker = new qq.maps.Marker({
        position: center,
        map: map
    });
    //添加到提示窗
    var info = new qq.maps.InfoWindow({
        map: map
    });
    //获取标记的点击事件
    qq.maps.event.addListener(marker, 'click', function() {
        info.open(); 
        info.setContent('<div style="text-align:center;white-space:nowrap;'+
        'margin:10px;"><b>这里填写公司名称</b><br>电话:0536-8184803<br>网址:www.hcses.com<br>地址:北京市朝阳区</div>');
        info.setPosition(center); 
    });
}
window.onload=MyMap;
</script>

添加新评论