Html可以通过JS来实现第三方地图的显示,如: 高德;
效果如下:浏览器小区域和全屏展示
代码如下:把key换成自己申请的key值
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦