腾讯地图网页内引用 - 异步

修改时间: 2018-12-11 14:32:00 PM

文章时间:2018年12月11日 14:30:31

这是异步的调用方式,测试可执行
普通方式调用:https://wiki.nooss.cn/archives/76.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>

body添加

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

任意地方添加

<script>
function init() {
    //设置地图中心点
    var center = new qq.maps.LatLng(36.718710,119.109930);
    //定义工厂模式函数
    var myOption = {
        zoom: 16,        //设置地图缩放级别
        center: center,  //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式 
    }
    //获取dom元素,添加地图信息
    var map = new qq.maps.Map(document.getElementById('container'),myOption);

    //创建标记
    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>地址:山东省潍坊市潍城区巴黎假日大厦10层</div>');
        info.setPosition(center); 
    });
}

function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://map.qq.com/api/js?v=2.exp&key=ONDBZ-DL4WV-EGVPM-URJ56-KL373-GRBJD&callback=init";
    document.body.appendChild(script);
}

window.onload=loadScript;  // dom文档加载结束开始加载 此段代码
</script>

添加新评论