Php + js implements the Baidu MAP Multi-Point annotation method, and js multi-point Annotation

Php + js implements the Baidu MAP Multi-Point annotation method, and js multi-point Annotation

This article describes how to implement Baidu MAP Multi-Point tagging using php + js. We will share this with you for your reference. The details are as follows:

1. Create json data in php

$products = $this->product_db->select($where);$products_json = json_encode($products);

2. Input json data in js

Similar to this structure

Var markerArr = [{title: "Name: Guangzhou Railway Station", point: "113.264531, 23.157003", address: "Guangzhou Railway Station, Guangdong Province", tel: "12306 "}, {title: "Name: Guangzhou tower (chigang Tower)", point: "113.330934, 23.113401", address: "Guangzhou tower (chigang Tower), Guangdong Province", tel: "18500000000 "}, {title: "Name: Guangzhou Zoo", point: "113.312213, 23.147267", address: "Guangzhou Zoo, Guangzhou City, Guangdong Province", tel: "18500000000" },{ title: "Name: tianhe park ", point:" 113.372867, 23.134274 ", address:" Tianhe park, Guangzhou City, Guangdong Province ", tel:" 18500000000 "}];

Js is good at processing json data

<Script> var products_json = {$ products_json}; // Baidu map var citymap = new citymap (products_json, 'suqian '); </script>

3. process the map

Document. write ('<script type = "text/javascript" src = "http://www.bkjia.com/uploads/allimg/161202/02310a446-1.png", new BMap. size (23, 25), {offset: new BMap. size (10, 25), imageOffset: new BMap. size (0, 0-index * 25)}); var marker = new BMap. marker (point, {icon: myIcon}); map. addOverlay (marker); var label = new BMap. label (pro. name, {offset: new BMap. size (20,-10)}); // sets the label style label. setStyle ({colo R: "# CC3333", fontSize: "13px", backgroundColor: "# CCFFFF", border: "0", fontWeight: "bold"}); marker. setLabel (label); return marker;}; this. addInfoWindow = function (marker, pro) {// pop-up window title var title = '<div style = "font-weight: bold; color: # CE5521; font-size: 14px "> <a href = "? M = home & c = product & id = '+ pro. id + '">' + pro. name + '</a> </div>'; // pop window information var html = []; html. push ('<table cellspacing = "0" style = "table-layout: fixed; width: 100%; font: 12px arial, simsun, sans-serif "> <tbody> '); html. push ('<tr>'); html. push ('<td style = "vertical-align: top; line-height: 16px; width: 38px; white-space: nowrap; word-break: keep-all "> address: </td> '); html. push ('<td style = "vertical-align: top; line-height: 16px">' + pro. address + '</td>'); html. push ('</tr>'); html. push ('</tbody> </table>'); var infoWindow = new BMap. infoWindow (html. join (""), {title: title, width: 200}); var openInfoWinFun = function () {marker. openInfoWindow (infoWindow) ;}; marker. addEventListener ("click", openInfoWinFun); return openInfoWinFun;} this. setMapEvent = function () {map. enableDragging (); // enables the map drag event. It is enabled (not writable) by default. // map. enableScrollWheelZoom (); // enable the map scroll wheel to zoom in and out the map. enableDoubleClickZoom (); // enables double-click mouse amplification. map is enabled by default. enableKeyboard (); // enable the keyboard to move the map up or down the right key}; this. addMapControl = function () {// Add the zoom control var ctrl_nav = new BMap to the map. navigationControl ({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE}); map. addControl (ctrl_nav); // Add the Thumbnail Control var ctrl_ove = new BMap to the map. overviewMapControl ({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1}); map. addControl (ctrl_ove); // Add the scale control var ctrl_sca = new BMap to the map. scaleControl ({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); map. addControl (ctrl_sca) ;}; this. initMap ();}