相信很多人在進行bingMapv6.3升級到bingMapV7.0的時候都會碰到這樣的問題，在V6.3中支援直接給pushpin設定一段HTML（通過setCustomIcon方法）但是到了V7.0中卻消失了，這讓很多在pushpin上多個樣式或者多個圖片的項目升級工作顧慮重重，現在我終於將這個問題解決掉了，現在與大家一起分享一下。
先發一張要實現的片：
解決思路是這樣的，pushpin的屬性中有個typename，就是給pushpin設定css樣式的，我們在初始化的時候給pushpin設定一個typename屬性，那麼把pushpin加到地圖上之後，我們就可以通過這個typename找到這個pushpin的div了，找到了之後，就可以通過JQuery或者js的方式修改這個pushpin的html了，但是從這裡開始我們所有針對pushpin的操作都要通過這個div來實現了。
那麼接下來最關鍵的就是對原有pushpin事件的處理，那麼原來pushpin擁有的那些事件該如何綁定呢，對於click這樣的事件，直接給div綁定上就可以了，就不多說了；關鍵就是draggable這個事件比較難處理，在試過通過div綁定JQuery UI的draggable，樣式可以加上，但是不能拖動，懷疑是和地圖的樣式有衝突，沒有繼續深究；通過map的事件來處理，也問題多多，通過click事件能夠能解決，但是還是不能達到和原來一樣的效果。最後想到一個辦法就是通過滑鼠的事件來處理，通過滑鼠的mousedown、mouseover、mouseup來處理，過程中需要把經緯度座標和螢幕座標進行轉換，但是比較關鍵的是在mousedown事件用要把地圖的瀏覽功能禁掉，在mouseup事件中再解禁，經過一番嘗試，終於搞定了。
具體的代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BingMapDivDrag.aspx.cs" Inherits="Infobox.WebFormIcon" %><%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%><meta http-equiv="x-ua-compatible" content="IE=8" /><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head2" runat="server"> <title></title><link href="Styles/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" /><script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script><script src="Scripts/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script><script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script><style type="text/css">.background1{ background-image:url("Images/Dispatched%20Box.png");}</style></head><body> <form id="form2" runat="server"> <div style="position:absolute; top:0px; left:0px; width: 1000px; height: 600px;" id="myMap"> </div><div id='dicCtrl' style="position:absolute; top:0px; left:350px; width:100%; height:29px; background-color:White; z-index:10000; vertical-align:middle;"> <input id="Button1" type="button" value="Change" onclick="ChangeIcon()" /> <input id="Button2" type="button" value="SetLocation" onclick="SetLocation()" /> </div> </form></body></html><script type="text/javascript">var _bingMapKey;var _map;var _pinInfobox;var _pin;var _pinEnableMove;var _pushpinLayer;function Init(){_bingMapKey = "AkzZURoD0H2Sle6Nq_DE7pm7F3xOc8S3CjDTGNWkz1EFlJJkcwDKT1KcNcmYVINU";Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme', { callback: themesModuleLoaded });}function themesModuleLoaded(){var divMap = "myMap";var mapType = Microsoft.Maps.MapTypeId.road;var mapOptions ={credentials: _bingMapKey,mapTypeId: mapType,enableClickableLogo: false,enableSearchLogo: false,showMapTypeSelector: true,showCopyright: false,theme: new Microsoft.Maps.Themes.BingTheme()};_map = new Microsoft.Maps.Map($('#' + divMap)[0], mapOptions);//Add infobox_pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, width: 200, height: 100, zIndex: 10000 });_map.entities.push(_pinInfobox);//Add pushpin layer_pushpinLayer = new Microsoft.Maps.EntityCollection();_map.entities.push(_pushpinLayer);AddPushpin();//Init latlongvar html = '<div id="divLat" style="left:0;bottom:0;position:absolute;background-color:rgb(248, 247, 245);height:18px;width:185px;z-index:99">'+ '<span ID="Label1" style="font-family:arial, sans-serif; font-size:12px;left:0;z-index:100;">Lat:</span>'+ '<span ID="labLat" style="font-family:arial, sans-serif; font-size:12px;left:30px;z-index:101;"></span>'+ '<span ID="Label2" style="font-family:arial, sans-serif; font-size:12px;left:120px;z-index:102;"> Lon:</span>'+ '<span ID="labLon" style="font-family:arial, sans-serif; font-size:12px;left:150px;z-index:103;"></span></div>'; //Times New Roman$('#' + divMap).append(html);_pinEnableMove = false;}var _pinX, _pinY, _eX, _eY;function onmouseover(e){var point = new Microsoft.Maps.Point(e.pageX, e.pageY, Microsoft.Maps.PixelReference.page);var loc = _map.tryPixelToLocation(point, Microsoft.Maps.PixelReference.page);_pinInfobox.setOptions({ title: "", description: "", visible: true });_pinInfobox.setLocation(loc);}function onmouseout(e){_pinInfobox.setOptions({ visible: false });}function AddPushpin(){var lat = 40.56090348161442;var lon = -74.345836486816438;var loc = new Microsoft.Maps.Location(lat, lon);var html = "<div style='position: absolute; top: 0px;left:0px;cursor:pointer;'><img src='C:\Users\cxji\Desktop\InfoCAD\InfoCAD-Center\Resources\0.png'/></div><div style='position: absolute; top: 28px;left:0px;'><img style='width: 15px; height: 15px;' src='C:\Users\cxji\Desktop\InfoCAD\InfoCAD-Center\Resources\DisConnect.png'/></div><div style='position: absolute; top: 16px;left:16px;font-size:12px;font-weight:bold;border:solid 2px Black;background-color:White;'>P-8-907</div><div style='position: absolute; top: 32px;left:16px;font-size:12px;font-weight:bold;border:solid 2px Black;background-color:Red;width:15px;'> <input type='button' style='width:12px;height:14px;background:Transparent;border-width:0px;' /></div><div style='position: absolute; top: 32px;left:31px;font-size:12px;font-weight:bold;border:solid 2px Black;background-color:LightSkyBlue;width:15px;'> <input type='button' style='width:11px;height:14px;background:Transparent;cursor:hand;border-width:0px;' /></div>";var pushpinOptions = { icon: "Images/Robbery.png", height: 128, width: 128, text: "1", anchor: new Microsoft.Maps.Point(64, 64), typeName: "background1", zIndex: 1000 }; //typeName: "background1", draggable: truevar pushpin = new Microsoft.Maps.Pushpin(loc, pushpinOptions);pushpin.ID = 'id1';pushpin.title = 'title1';pushpin.description = 'description1';pushpin.latitude = lat;pushpin.longitude = lon;_pushpinLayer.push(pushpin);_pin = pushpin;}Init();var div;function ChangeIcon(){var iconStyle = "<div style='position: absolute; top: 0px;left:0px;'><img src='C:\Users\cxji\Desktop\InfoCAD\InfoCAD-Center\Resources\0.png'/></div><div style='position: absolute; top: 28px;left:0px;'><img style='width: 15px; height: 15px;' src='C:\Users\cxji\Desktop\InfoCAD\InfoCAD-Center\Resources\DisConnect.png'/></div><div style='position: absolute;cursor:hand; top: 16px;left:16px;font-size:12px;font-weight:bold;border:solid 2px Black;background-color:White;line-height:12px'>P-8-907</div><div style='position: absolute; top: 32px;left:16px;font-size:12px;font-weight:bold;border:solid 2px Black;background-color:Red;width:15px;'> <input type='button' style='width:12px;height:14px;background:Transparent;cursor:hand;border-width:0px;' /></div><div style='position: absolute; top: 32px;left:31px;font-size:12px;font-weight:bold;border:solid 2px Black;background-color:LightSkyBlue;width:15px;'> <input type='button' style='width:11px;height:14px;background:Transparent;cursor:hand;border-width:0px;' /></div>";div = $('.background1');div.data('latitude', 40.56090348161442);div.data('longitude', -74.345836486816438);div.html(iconStyle);_map.setOptions({ disablePanning: true });div.bind('mousedown', OnPushpinMouseDown);div.bind('mousemove', OnPushpinMouseMove);div.bind('mouseup', OnPushpinMouseUp);}function SetLocation(){//debugger;var location = new Microsoft.Maps.Location(50, -70);var point = _map.tryLocationToPixel(location, Microsoft.Maps.PixelReference.page);var point1 = _map.tryLocationToPixel(location, Microsoft.Maps.PixelReference.control);var point2 = _map.tryLocationToPixel(location, Microsoft.Maps.PixelReference.viewport);_pinX = point2.x;_pinY = point2.y;var width = div[0].style.width.replace("px", "");var height = div[0].style.height.replace("px", "");div[0].style.left = _pinX - width / 2;div[0].style.top = _pinY - height / 2;}function OnPushpinClick(){alert('click');}var _left = 0, _top = 0;function OnPushpinMouseDown(e){//alert('mousedown');_pinEnableMove = !_pinEnableMove;var className = e.currentTarget.className;var div = $("'." + className + "'");if (div){var lat = div.data('latitude');var lon = div.data('longitude');_eX = e.pageX;_eY = e.pageY;var location = new Microsoft.Maps.Location(lat, lon);var point = _map.tryLocationToPixel(location, Microsoft.Maps.PixelReference.page);_pinX = point.x;_pinY = point.y;_left = Math.round(div[0].style.left.replace('px', ''));_top = Math.round(div[0].style.top.replace('px', ''));_map.setOptions({ disablePanning: true });}}function OnPushpinMouseMove(e){if (_pinEnableMove){var x = e.pageX;var y = e.pageY;var offsetX = x - _eX;var offsetY = y - _eY;div[0].style.left = _left + offsetX;div[0].style.top = _top + offsetY;div.data('latitude', location.latitude);div.data('longitude', location.longitude);}}function OnPushpinMouseUp(){_pinEnableMove = false;_map.setOptions({ disablePanning: false });}</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
