zoukankan      html  css  js  c++  java
  • 百度地图调用

    1、引入外部文件

    <script src="http://api.map.baidu.com/api?v=1.1&amp;services=true" type="text/javascript"></script>
    <script src="http://api.map.baidu.com/getscript?v=1.1&amp;ak=&amp;services=true&amp;t=20130716024057" type="text/javascript"></script>
    <link href="http://api.map.baidu.com/res/11/bmap.css" type="text/css" rel="stylesheet">

    2、新建div,且设置高度

    #dituContent {
    min-height: 350px !important;
    }

     <div id="dituContent" class="col-sm-12"></div>

    3、js代码

    var map = new BMap.Map("dituContent");
    map.centerAndZoom(new BMap.Point(117.134654,39.227424), 20);
    map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }));
    map.enableScrollWheelZoom(true);
    //标注点数组
    var markerArr = [{ title: "北辰大厦", content: "北辰大厦", point: "117.134654|39.227424", isOpen: 1, icon: { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5 } }
    ];
    //创建marker
    for (var i = 0; i < markerArr.length; i++) {
    var json = markerArr[i];
    var p0 = json.point.split("|")[0];
    var p1 = json.point.split("|")[1];
    var point = new BMap.Point(p0, p1);
    var iconImg = createIcon(json.icon);
    var marker = new BMap.Marker(point, { icon: iconImg });
    //var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });
    //marker.setLabel(label);
    map.addOverlay(marker);
    //label.setStyle({
    // borderColor: "#808080",
    // color: "#333",
    // cursor: "pointer"
    //});
    }
    //创建一个Icon
    function createIcon(json) {
    var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
    return icon;
    }

  • 相关阅读:
    Python基础之流程控制
    Python基础之深拷贝与浅拷贝
    常见开源告警系统对比分析(prometheus、open-falcon、zabbix)
    prometheus简介
    谈谈业务系统的监控报警
    UML类图与类的关系
    IntelliJ IDEA反向生成UML类图
    UML类图几种关系的总结
    UML类图详解和示例
    leetcode-----43. 字符串相乘
  • 原文地址:https://www.cnblogs.com/taoshengyujiu/p/5950521.html
Copyright © 2011-2022 走看看