继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Html显示地图

白板的微信
关注TA
已关注
手记 341
粉丝 70
获赞 385

Html可以通过JS来实现第三方地图的显示,如: 高德;

效果如下:浏览器小区域和全屏展示

    

代码如下:把key换成自己申请的key值

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=667cbbf11eee369b935122434f031a4d"></script><div id="container" style="width:500px; height:500px"></div>

高德配置(开发者平台-->控制台)

 

<script >    var map = new AMap.Map('container',{
        zoom: 10,
        icon: "punch_dw.png",
        center: [113.466123,22.32666]
    });    var marker;
    addMarker();    //在地图上添加图片标记函数
    function addMarker(){
        marker=new AMap.Marker({
            icon:new AMap.Icon({    //复杂图标
                size:new AMap.Size(125,125),//图标大小
                image:"punch_dw.png", //大图地址
                imageOffset:new AMap.Pixel(0,0)//相对于大图的取图位置            }),
            position:new AMap.LngLat(113.466123,22.32666)
        });
        marker.setMap(map);  //在地图上添加点
    }</script>

原文链接:http://www.apkbus.com/blog-894741-63334.html

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP