zoukankan      html  css  js  c++  java
  • 百度地图使用2-自定义覆盖物

    @model ShanwuWebSite.Areas.COM.Models.BaiduMapModel
    @{
        ViewBag.Title = "百度地图";
        Layout = "~/Areas/COM/Views/Shared/_Layout.cshtml";
    }
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <br />
    <br />
    <br />
    <div id="allmap" style="300px; height:300px;"></div>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=Ooaq16jRplQWMN3SxnxPq3rW" type="text/javascript"></script>
    <script type="text/javascript">
    
        $(function () {
            @*// 百度地图API功能
            var map = new BMap.Map("allmap");    // 创建Map实例
            map.centerAndZoom(new BMap.Point(@Model.Latitude, @Model.Longitude), 11);  // 初始化地图,设置中心点坐标和地图级别
            //map.centerAndZoom("济南", 11);  // 初始化地图,设置中心点坐标和地图级别
            map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
            map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放*@
    
            // 百度地图API功能
            @*var map = new BMap.Map("allmap");
            var point = new BMap.Point(116.417854, 39.921988);
            //  var marker = new BMap.Marker(point);  // 创建标注
    
            var myIcon = new BMap.Icon('@Url.Action("GetAvator", new {path= "http://hgproductimg.oss-cn-qingdao.aliyuncs.com/20151208/64e6168047e94e1fac4e94493b2521fc.jpg" })', new BMap.Size(100, 100));
            var marker2 = new BMap.Marker(point, { icon: myIcon });  // 创建标注
            //marker.setIcon(new BMap.IconSequence('@Url.Action(@"http://hgproductimg.oss-cn-qingdao.aliyuncs.com/20151208/64e6168047e94e1fac4e94493b2521fc.jpg")', new BMap.Size(100, 100)));
            map.addOverlay(marker2);              // 将标注添加到地图中
            map.centerAndZoom(point, 15);
            var opts = {
                 200,     // 信息窗口宽度
                height: 100,     // 信息窗口高度
                title: "海底捞王府井店", // 信息窗口标题
                enableMessage: true,//设置允许信息窗发送短息
                message: "亲耐滴,晚上一起吃个饭吧?戳下面的链接看下地址喔~"
            }
            var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
            marker2.addEventListener("click", function () {
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            });*@
            var map = new BMap.Map("allmap");            // 创建Map实例
            var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
            map.centerAndZoom(point, 15);                     // 初始化地图,设置中心点坐标和地图级别。
    
            //1、定义构造函数并继承Overlay
            // 定义自定义覆盖物的构造函数
            function SquareOverlay(center, length, src) {
                this._center = center;
                this._length = length;
                this._src = src;
            }
            // 继承API的BMap.Overlay
            SquareOverlay.prototype = new BMap.Overlay();
    
            //2、初始化自定义覆盖物
            // 实现初始化方法
            SquareOverlay.prototype.initialize = function (map) {
                // 保存map对象实例
                this._map = map;
                // 创建div元素,作为自定义覆盖物的容器
                var div = document.createElement("div");
                // 创建img元素 作为图像显示
                var img = document.createElement("img");
    
                //图像相关设置
                img.src = this._src;
                img.style.height = this._length + "px";
                img.style.width = this._length + "px";
                img.style.borderRadius = "50px";
    
                div.style.position = "absolute";
                // 可以根据参数设置元素外观
                div.style.width = this._length + "px";
                div.style.height = this._length + "px";
                div.appendChild(img);
                div.style.borderRadius = "50px";
                // 将div添加到覆盖物容器中
                map.getPanes().markerPane.appendChild(div);
                // 保存div实例
                this._div = div;
                // 需要将div元素作为方法的返回值,当调用该覆盖物的show、
                // hide方法,或者对覆盖物进行移除时,API都将操作此元素。
                return div;
            }
    
            //3、绘制覆盖物
            // 实现绘制方法
            SquareOverlay.prototype.draw = function () {
                // 根据地理坐标转换为像素坐标,并设置给容器
                var position = this._map.pointToOverlayPixel(this._center);
                this._div.style.left = position.x - this._length / 2 + "px";
                this._div.style.top = position.y - this._length / 2 + "px";
            }
    
            //4、显示和隐藏覆盖物
            // 实现显示方法
            SquareOverlay.prototype.show = function () {
                if (this._div) {
                    this._div.style.display = "";
                }
            }
            // 实现隐藏方法
            SquareOverlay.prototype.hide = function () {
                if (this._div) {
                    this._div.style.display = "none";
                }
            }
    
            //5、添加其他覆盖物方法
            //比如,改变颜色
            SquareOverlay.prototype.yellow = function () {
                if (this._div) {
                    this._div.style.background = "yellow";
                }
            }
    
            //6、自定义覆盖物添加事件方法
            SquareOverlay.prototype.addEventListener = function (event, fun) {
                this._div['on' + event] = fun;
            }
    
            //7、添加自定义覆盖物
            var mySquare = new SquareOverlay(new BMap.Point(116.404, 40), 50, "http://hgproductimg.oss-cn-qingdao.aliyuncs.com/20151208/64e6168047e94e1fac4e94493b2521fc.jpg");
            map.addOverlay(mySquare);
    
            //8、 为自定义覆盖物添加点击事件
            mySquare.addEventListener('click', function () {
                var infoWindow = new BMap.InfoWindow("地址:北京市东城区王府井大街88号乐天银泰百货八层");  // 创建信息窗口对象
                map.openInfoWindow(infoWindow, new BMap.Point(116.404, 40)); //开启信息窗口
            });
        });
    </script>
  • 相关阅读:
    html
    jQuery
    Python基础(一)
    excel中怎样批量取消隐藏工作表
    AD密码过期查询
    @Controller和@RestController的区别
    编写一个JPA测试用例
    SpringBoot(二)——使用Mysql和JPA
    Linux命令大全
    Centos7安装Mysql
  • 原文地址:https://www.cnblogs.com/nele/p/5039031.html
Copyright © 2011-2022 走看看