var POIs = [

  // Attempt to the Shanghai Heroes Monument (Google Maps names it The Bund Museum)

  {

    x: 121.48695, y: 31.24427, gcs: 'wgs84',

    label: 'GPS coordinates that point to the middle of the circle</br>on most satellite maps',

    baiduPointLabelOffset: { offset: new BMap.Size(-200, -50) }

  },

  {

    x: 121.4914, y: 31.2423, gcs: 'gcj-02',

    label: 'Coordinates of the center of the circle taken from google.com/maps<br/>(which suggests Google uses GCJ-02)',

    baiduPointLabelOffset: { offset: new BMap.Size(22, 10) }

  }

];

​

// Google coordinates

var gPoint = new BMap.Point(121.48695, 31.24427);  // GPS (WGS-84) lon, lat of the Bund Museum in Shanghai - https://www.google.com/maps/@31.24427,121.48695,19z and switch to satellite view

gPoint = new BMap.Point(121.4914, 31.2423);  // GCJ-02 lon, lat of the Bund Museum in Shanghai - https://www.google.com/maps/@31.2423,121.4914,19z and switch to street view

// gPoint = new BMap.Point(-122.0851053, 37.4219593);  // lon, lat of the Googleplex (no Baidu map data but zooms out in Mountain View)

​

var labelOffset = { offset: new BMap.Size(20, -10) };

​

// Initialize map

var map = new BMap.Map('baidu-map');

map.centerAndZoom(gPoint, 15);

map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));  // add scale

map.addControl(new BMap.NavigationControl());

map.addControl(new BMap.MapTypeControl());   // map type control: toggle street/satellite/2.5D

map.enableScrollWheelZoom();  // mouse wheel scroll is disabled by default

​

POIs.forEach(function processSourcePoint(sourcePoint) {

  var mapPoint = new BMap.Point(sourcePoint.x, sourcePoint.y);

  var marker = new BMap.Marker(mapPoint);

  map.addOverlay(marker);

  marker.setLabel(new BMap.Label(sourcePoint.label, labelOffset));

​

  // Coordinate conversion to BD-09 from WGS-84 (0) or from GCJ-02 (2)

  BMap.Convertor.translate(mapPoint, sourcePoint.gcs === 'wgs84' ? 0 : 2, function (baiduPoint) {

    var baiduMarker = new BMap.Marker(baiduPoint);

    map.addOverlay(baiduMarker);

    baiduMarker.setLabel(new BMap.Label(

      sourcePoint.gcs + ' converted to Baidu coordinates:<br/>' +

        baiduPoint.lng + ', ' +

        baiduPoint.lat +

        '<br/>(note the offset of ' + (map.getDistance(mapPoint, baiduPoint)).toFixed(2) + ' meters)',

      sourcePoint.baiduPointLabelOffset

    ));

​

    map.addOverlay(new BMap.Polyline([mapPoint, baiduPoint]));  // draw a line between points

  });

​

});

​

​

function geoFindMe() {

  var output = document.getElementById("google-map");

​

  if (!navigator.geolocation){

    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";

    return;

  }

​

  function success(position) {

    var latitude  = position.coords.latitude;

    var longitude = position.coords.longitude;

​

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

​

    var img = new Image();

    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=17&size=300x300&sensor=false";

​

    output.appendChild(img);

​

    var youAreHere = new BMap.Point(longitude, latitude);

    map.centerAndZoom(youAreHere, 17);

    var markerYouAreHere = new BMap.Marker(youAreHere);

    map.addOverlay(markerYouAreHere);

    markerYouAreHere.setLabel(new BMap.Label('navigator.geolocation.getCurrentPosition<br/>thinks you are here', labelOffset));

​

    // the coordinate type, 2, be 0 (for WGS-84/GPS), but passing 0 returns (0, 0), presumably because the point is not in China

    BMap.Convertor.translate(youAreHere, 2, function (point) {

      var marker = new BMap.Marker(point);

      map.addOverlay(marker);

      marker.setLabel(new BMap.Label(

          'geolocation converted to Baidu coordinates:<br/>' +

            point.lng + ', ' +

            point.lat +

            '<br/>(note the offset of ' + (map.getDistance(youAreHere, point)).toFixed(2) + ' meters)',

          labelOffset

      ));

​

      map.addOverlay(new BMap.Polyline([youAreHere, point]));  // draw a line between points

    });

  }

​

  function error() {

    output.innerHTML = "Unable to retrieve your location";

  }

​

  output.innerHTML = "<p>Locating.</p>";

​

  navigator.geolocation.getCurrentPosition(success, error);

​

  map.Geolocation().getCurrentPosition(function callback (point) {

    console.log('Baidu geolocation');

    var marker = new BMap.Marker(point);

    map.addOverlay(marker);

    marker.setLabel(new BMap.Label('Bmap.geolocation:<br/>' +

            point.lng + ', ' +

            point.lat, //+

            //'<br/>(note the offset of ' + (map.getDistance(youAreHere, point)).toFixed(2) + ' meters)',

            labelOffset

    ));

  });

}

​

​