I believe many people will encounter this problem when upgrading bingmapv6.3 to bingmapv7.0. In v6.3, you can directly set an HTML section for pushpin (using the setcustomicon method), but it disappears in v7.0, this allows many projects with multiple styles or images on pushpin to be upgraded. Now I have finally solved this problem and I will share it with you.
Start with a piece of film to be implemented:
The solution is as follows: the pushpin attribute has a typename, which sets the CSS style for pushpin. We set a typename attribute for pushpin during initialization, after adding pushpin to the map, we can use the typename to find the pushpin Div. After finding it, we can modify the HTML of pushpin through jquery or Js, however, from here on all the operations for pushpin will be implemented through this Div.
Then, the most important thing to do is to process the original pushpin event. How should we bind the events owned by pushpin? For events like click, We can bind them directly to the div, the key is that the draggable event is hard to handle. You have tried to bind the draggable of jquery UI through Div. You can add styles but cannot drag them, it is suspected that there is a conflict with the map style and it has not been further investigated. There are also many problems to be handled through MAP events, which can be solved through click events, but it still cannot achieve the same effect as the original. Finally, you can use the mouse event to process the events, such as mousedown, Mouseover, and mouseup. During the process, you need to convert the coordinates of longitude and latitude and screen coordinates, however, the most important thing is that the map browsing function should be disabled in the mousedown event, and then the Map Browsing function should be disabled in the mouseup event. After some attempts, we finally got it done.
The specific code is as follows:
<%@ 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" />
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
